We've covered the basics of destructuring assignment. This article is the continuation of part 1
Destructuring assignment is a more convenient and special syntax that allows unpacking of arrays or objects into separate variables. It is used on array, objects, and functions.
Array destructuring
Let's see a couple of examples below:
const arr = [ "Bello", "Osagie", "Noah" ];
const [ surName, firstName, otherName ] = arr;
// split individual items into separate variables
// => "Bello Osagie Noah".split(' ');
console.log(surName); // Bello => surName = arr[0]
console.log(firstName); // Osagie => firstName= arr[1]
console.log(otherName ); // Noah => otherName = arr[2]
The example above is the same as below:
const [ surName, firstName, otherName ] = "Bello Osagie Noah".split(' ');
console.log(surName); // Bello => surName = arr[0]
console.log(firstName); // Osagie => firstName= arr[1]
console.log(otherName ); // Noah => otherName = arr[2]
Destructuring allows certain elements in an array to be omitted by omitting the element variable.
const arr = [ "Bello", "Osagie", "Noah" ];
const [ surName, /*omitted*/ , otherName ] = arr;
console.log(surName);
console.log(otherName);
It works with any iterable data structure like strings, objects, sets, etc.
// string
const [ a, b, c ] = "xyz";
console.log(a); // x
console.log(b); // y
console.log(c); // z
//obj
const obj = { one: 1, two: 2, three: 3 };
const { one, two, three } = obj;
console.log(one); // 1
console.log(two); // 2
console.log(three); // 3
// set
const [ one_, two_, three_ ] = new Set([1, 2, 3]);
console.log(one_) // 1
console.log(two_) // 2
console.log(three_) // 3
You can also unpack numbers to a variable by the rest parameters.
const [ one, two, ...numb ] = [ 1, 2, 3, 4, 5, 6 ]
// the rest will be all except one and two
console.log(one); // 1
console.log(two); // 2
console.log(numb); // [ 3, 4, 5, 6 ]
The rest operation above works on objects also:
See below:
const obj = {
one: 1,
two: 2,
three: 3,
four: 4,
five: 5,
six: 6,
};
const { one, two, ...numb} = obj;
console.log(one); // 1
console.log(two); // 2
console.log(numb); // { three: 3, four: 4, five: 5, six: 6 }
We can also add properties in an object by setting default values (use =).
const obj = { one: 1 };
const { two = 2, three = 3, one } = obj;
console.log(one); // 1
console.log(two); // 2
console.log(three); // 3
We can set default values also in arrays.
const [ firstName = "John", lastName = "Bello" ] = [ "Osagie" ];
console.log(firstName); // Osagie
console.log(lastName ); // Bello
We can also swap values of two variables using a destructuring assignment.
let firstName = "Osagie";
let lastName = "Bello";
// swap to firstName=Bello, lastName=Osagie
[ firstName, lastName ] = [ lastName, firstName ];
console.log(`${firstName} ${lastName}`); // Bello Osagie
We can also destructure to loop over keys-and-values of an object.
const person = {
name: "Bello",
age: 27
};
for ( let [ key, value ] of Object.entries(person) ) {
console.log(`${key}:${value}`);
/*
name:Bello
age:27
*/
}
It works on iterable objects like maps.
const map = new Map();
.set("name", "Bello");
.set("age", "27");
// syntax looks more convenient with map
for (let [key, value] of map) {
console.log(`${key}:${value}`);
/*
name:Bello
age:27
*/
}
We can use restructure an array (object) returned by a function.
const arr = () => {
return [ 4, 6, 2]
};
const [ four, , two ] = arr();
console.log( arr() ); // [ 4, 6, 2 ]
Top comments (0)