- Study new topics in isolation, else mind won't be able to grasp the concept completely for long term. This is also backed by some empirical studies.
- Destructuring: Way of unpacking values from arrays or objects into separate variables.
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
- [x,y,z] although looks like an array but when its on LHS of =, then its considered as destructuring.
- Destructuring is immutable operation.
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);
Swapping Variables [mutating]
let array = [5,6];
let [a,b] = array;
console.log(`a: ${a}, b:${b}`);
[b,a] = [a,b];
console.log(`a: ${a}, b:${b}`);
Function returns an array, immediately destruct the results which allows us to return multiple values from a function
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}`);
Destructuring Nested Arrays
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
Destructuring from Arrays of unknown size:
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'
Destructuring Objects:
- Use {} for object destructuring, [] for array destructuring.
- Provide exact variable names as mentioned in object's property name to be extracted. Order of these variable name does not matter.
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 }
Destructuring Nested Objects
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'});
Top comments (0)