kaniosrn-j
7/22/2017 - 8:43 AM

## Destructuring

Destructuring

``````
/*=============================================
= Destructuring
=============================================*/
// Array
// ES5
var joe = ['Joe', 31]
var name = joe[0]
var age = [1]
console.log(name, age)

// ES 6
var joe = ["Joe", 31];
const [name, age] =  joe

// Object
const obj = {
firstname: 'Joe',
lastname: 'Boo'
}
const { firstname: first, lastname: last } = obj;

function calcAgeRetirement(year){
const age = new Date().getFullYear() - year
return [age, 65 - age]
}

const [age, retirement] = calcAgeRetirement(1990)
console.log(age)
console.log(retirement)

// Example 1
function convertCurrency(amount) {
const converted = {
USD: amount * 0.76,
GPB: amount * 0.53,
AUD: amount * 1.01,
MEX: amount * 13.30
};
return converted;
}

const hundo = convertCurrency(100)
//  Destructuring an objects
// you can put your objects in any order and it will works fine
const { USD, GPB } = hundo
// console.log(USD, GPB);

// default name argument
// when passing in as an objects, it's gonna Destructuring them into an object. This will Destructuring them into vaiable.
function tipCalc({total = 100, tip = 0.15, tax = 0.13}) {
}
console.log(tipCalc({ tax: 0.3}))
// const bill = tipCalc({ tip: 0.20, total: 200 });

//Example 2
const person = {
first: 'Wes',
last: 'Bos',
city: 'Hamilton',
};

/*=============================================
=            Example 1                       =
=============================================*/
// const first = person.first;
// const last = person.last;
// output: Object {first: "Wes", last: "Bos", country: "Canada", city: "Hamilton", twitter: "@wesbos"}
const { first, last, country, city, twitter } = person;

/*=============================================
=            Example 2                        =
=============================================*/
const wes = {
first: 'Wes',
last: 'Bos',
social: {
},
web: {
blog: 'https://wesbos.com'
}
}
};
// twitter is stored in 'tweet'
// facebook is stored in 'fb'
// console.log(tweet);

/*=============================================
=            Example 3                        =
=============================================*/
const settings = {
// width: 300,
color: 'black'
}  // require height, fontSize

const {
width = 100,
height = 100,
color = 'blue',
fontSize = 25
} = settings;
// output: Object {width: 300, color: "black"}

//Example 3
let inRing = 'Hulk Hogan';
let onSide = 'The Rock';

// console.log('in ring' + inRing, onSide);
console.log('In ring:'+`\${inRing} ` + ', On Side: ' + `\${onSide}`);
// result: In ring:Hulk Hogan , On Side: The Rock

[inRing, onSide] = [onSide, inRing]; // switching string value

// console.log(inRing, onSide);
console.log('In ring:'+`\${inRing} ` + ', On Side: ' + `\${onSide}`);
// result: In ring:The Rock , On Side: Hulk Hogan

// Example 4
// Ex.1
const details = ['Joe Boo邏 ', 123, 'kanisorn.com'];
const [name,id,website] = details;
console.log(`Name: \${name}, ID: \${id}, Website: \${website}`);
// result: Name: Wes Bos, ID: 123, Website: wesbos.com

// Ex.2
const data = 'bastketball, Sports, 90210, 23'
// Destructuring an array
const [itemName,category,sku,inventory] = data.split(', ');
console.log(itemName,category,sku,inventory);
// result: bastketball  Sports  90210  23

// Ex.3
const team = ['a','b','c','d','e'];
const [captain, assistant, ...players] = team;
console.log(`captain:\${captain}, assistant:\${assistant}, players:\${players}`); // using rest '...' operator means that it will give you the rest of an array
// captain:a, assistant:b, players:c,d,e
// result: a b ["c", "d", "e"]
``````