Object Destructuring assignment
So destructuring is just a funky way of extracting data from a data structure. Here are a couple examples.
//Example 1 Simple
let objTest = { x:1, y: 2 , z: 3}
let {x,y,z} = objTest;
console.log(x); //1
console.log(y); //2
console.log(z); //3
//Example 2 Simple
//another way of object destructuring without declaration
let objTest = { a:9, b: 8 , c: 7}
let a,b,c;
({a,c,b} = objTest); //requires surrounding ()
console.log(a); //9
console.log(b); //8
console.log(c); //7
As long as you have the variable name that matches the property you are trying to extract it will be assigned.
//Example 3
let z = {
a:{
b:{
c:{
d:1
},
e:2
},
e:3
}
};
let{a:{b:{c:{d}, e}}} = z;
console.log(d); //1
console.log(e); //2
//Example 4
let z = {
a:{
b:{
c:{
d:1
},
e:2
},
e:3
}
};
let{a:{b:{c:{d}, e}, e:f}} = z; // note the e:f re-assignment
console.log(d);
console.log(e);
console.log(f);
As you can see you can destruct from nested and reassign the variable if you have two variable names the same
//Example 5 same variable re-assign
let z = {
1:{a:'my'},
2:{a:'big'},
3:{a:'world'}
};
let {1:{a:word1}, 2:{a:word2}, 3:{a:word3}} = z;
console.log(word1); //my
console.log(word2); //big
console.log(word3); //world
So whats the point of all this, well it means you can do stuff like this.
//Example 6 destruct function returns
function doSomething(){
return {a:1, b:2};
}
let {a,b} = doSomething();
console.log(a); //1
console.log(b); //2
So now we can easily extract out variables from large responses alternatively we can destruct it when as we use it in a function, see below.
//Example 7 destruct function params
function destructor({a,b,c}){
console.log(a);
console.log(b);
console.log(c);
}
destructor({a:'hello', b:'my', c:'world'});
//output
//hello
//my
//world
//Example 8 in an iterator
var myArray = [
{a:1,b:2,c:3},
{a:4,b:5,c:6},
{a:7,b:8,c:9}
];
myArray.forEach(function({a,b,c}){
console.log(a,b,c);
});
//output
// 1 2 3
// 4 5 6
// 7 8 9
Read more here