JavaScript - Destructuring Arrays & Objects [Live Doc]

const nums = [8,4,5]; const num1 = nums[0]; const num2 = nums[1]; const num3 = nums[2]; console.log(num1, num2, num3); is reduced to const [x,y,z] = nums; console.log(x, y, z); three const variables named x,y,z are created in this step

const girl = { name: 'Melania', friends: ['Alina', 'Alice', 'Ayesha', 'Anamika', 'Anaya'], eats: ['Roasted', 'Pizza', 'Burger', 'Rice', 'Manchurian'], }; const [first, second] = girl.friends; console.log(first, second); const [,,,fourth,last] = girl.eats; console.log(fourth, last);

let array = [5,6]; let [a,b] = array; console.log(`a: ${a}, b:${b}`); [b,a] = [a,b]; console.log(`a: ${a}, b:${b}`);

const girl = { name: 'Melania', friends: ['Alina', 'Alice', 'Ayesha', 'Anamika', 'Anaya'], eats: ['Roasted', 'Pizza', 'Burger', 'Rice', 'Manchurian'], drinks: ['Juice','Coffee','Coke'], order: function(eat,drink){ return [this.eats[eat],this.drinks[drink]]; } }; const [mainCourse, drinks] = girl.order(2, 2); console.log(`mainCOurse: ${mainCourse}`); console.log(`drinks: ${drinks}`);

let nums = [5,3,[8,7,9,3]]; let [x,y,z] = nums; console.log(`x: ${x}`); // 5 console.log(`y: ${y}`); // 3 console.log(`z: ${z}`); // 8,7,9,3 let nums2 = [5,3,[8,7]]; let [x,,[y,z]] = nums2; console.log(`x: ${x}`, `y: ${y}`, `z: ${z}`); // 5 8 7

const names = ['Michael','Charlie','Peter']; let [w='XXX',x='XXX',y='XXX',z='XXX'] = names; console.log(w,x,y,z); // 'Michael' 'Charlie' 'Peter' 'XXX'

const girl = { name: 'Melania', friends: ['Alina', 'Alice', 'Ayesha', 'Anamika', 'Anaya'], eats: ['Roasted', 'Pizza', 'Burger', 'Rice', 'Manchurian'], drinks: ['Juice','Coffee','Coke'], works: { mtwt: { start: 9, end: 5 }, fri: { start:9, end: 3 } } }; const {name, works, drinks} = girl; console.log(name); console.log(works); console.log(drinks); // Replace long property names with custom names: const {name:user, works:timings, drinks:enjoys} = girl; console.log(user); console.log(timings); console.log(enjoys); //Destructuring data from API calls returned in the form of objects i.e Attaching a default value to a property that does not exist on object received from an API call // details does not exist, so default value is assigned const { details = [], eats: loves = [] } = girl; console.log(details); // eats exist but is renamed as loves, hence default value won't apply console.log(loves);

## Mutating Variables using object destructuring let x = 10; let y = 20; let obj = {x:1, y:2, z:3}; {x,y} = obj; // Error When we start a line with a '{', then JS expects a code-block. And we cannot assign anything to a code-block on LHS using = operator. Hence, an Error is thrown. The error is resolved by wrapping into () as shown below ({x,y} = obj); //{ x: 1, y: 2, z: 3 }

const girl = { name: 'Melania', friends: ['Alina', 'Alice', 'Ayesha', 'Anamika', 'Anaya'], eats: ['Roasted', 'Pizza', 'Burger', 'Rice', 'Manchurian'], drinks: ['Juice','Coffee','Coke'], works: { mtwt: { start: 9, end: 5 }, fri: { start:10, end: 2 } } }; let { fri } = works; console.log(fri); // Destructuring the fri object using the same property names start, end let {fri: {start, end}} = works; console.log(start, end); // Further renaming for shortening start as 'b' and end as 'e' let {fri: {start: b, end: e}} = works; console.log(b, e); const girl = { name: 'Melania', friends: ['Alina', 'Alice', 'Ayesha', 'Anamika', 'Anaya'], eats: ['Roasted', 'Pizza', 'Burger', 'Rice', 'Manchurian'], drinks: ['Juice','Coffee','Coke'], works: { mtwt: { start: 9, end: 5 }, fri: { start:10, end: 2 } }, // these destructured property-names have to be same as they are passed inside the girl.sleep(). Order need not be same. sleep: function ({time='NA', address='NA', color = 'NA', duration='NA'}){ console.log(`${this.name} sleeps at ${address} for ${duration} in ${color}light for ${duration}. She loves to eat ${this.eats[0]}`); } }; // A single object is passed, which will be destructured by the method inside the object extracting all values via destructuring girl.sleep({time: '10pm', address:'home', color: 'blue', duration: '7hrs'}); girl.sleep({time: '9pm', duration: '7hrs'});