Destructuring in JavaScript
What destructuring means
Destructuring simply means to destructure or breakdown or split something, an array or object to get its contents.
Destructuring has various use cases like, destructuring array to add elements, or destructuring to assign default values in function arguments.
Destructuring Arrays
let arr = ["Kushagra", "Trivedi"]
// destructuring assignment
// sets firstName = arr[0]
// and surname = arr[1]
let [firstName, surname] = arr;
alert(firstName); // Kushahgra
alert(surname); // Trivedi
We can also do:
let [firstname, lastname] = "Kushagra Trivedi".split(" ");
alert(firstname); // Kushagra
alert(lastname); // Trivedi
Actually, we can use it with any iterable, not only arrays:
let [a, b, c] = "abc"; // ["a", "b", "c"]
let [one, two, three] = new Set([1, 2, 3]);
That works, because internally a destructuring assignment works by iterating over the right value. It’s a kind of syntax sugar for calling for..of over the value to the right of = and assigning the values.
We can use any “assignables” on the left side.
For instance, an object property:
let user = {};
[user.name, user.surname] = "John Smith".split(' ');
alert(user.name); // John
alert(user.surname); // Smith
In the previous chapter, we saw the Object.entries(obj) method.
We can use it with destructuring to loop over the keys-and-values of an object:
let user = {
name: "John",
age: 30
};
// loop over the keys-and-values
for (let [key, value] of Object.entries(user)) {
alert(`\({key}:\){value}`); // name:John, then age:30
}
//The similar code for a Map is simpler, as it’s iterable:
let user = new Map();
user.set("name", "John");
user.set("age", "30");
// Map iterates as [key, value] pairs, very convenient for destructuring
for (let [key, value] of user) {
alert(`\({key}:\){value}`); // name:John, then age:30
}
There’s a well-known trick for swapping values of two variables using a destructuring assignment:
let guest = "Jane";
let admin = "Pete";
// Let's swap the values: make guest=Pete, admin=Jane
[guest, admin] = [admin, guest];
alert(`\({guest} \){admin}`); // Pete Jane (successfully swapped!)
Here we create a temporary array of two variables and immediately destructure it in swapped order.
We can swap more than two variables this way.
If the array is longer than the items on the left, then
let [first, second] = ['one', 'two', 'three', 'four'];
alert(first); // one
alert(second); // two
// Further items aren't assigned anywhere
So we use '...'
let [first, second, ...third] = ['one', 'two', 'three', 'four']
console.log(third) // ['three', 'four']
Now this is how we assign default values
let [name = "Kushagra", surname = "Trivedi"] = ["Julius"];
alert(name); // Julius (from array)
alert(surname); // Trivedi (default used)
We can also provide functions as default values. They are evaluated only if the value is not provided.
For instance, here we use the prompt function for two defaults:
// runs only prompt for surname
let [name = prompt('name?'), surname = prompt('surname?')] = ["Julius"];
alert(name); // Julius (from array)
alert(surname); // whatever prompt gets
Please note: the prompt will run only for the missing value (surname).
Object Destructuring
Now just as we do with arrays, we can also destructure objects
const {firstname, lastname} = {firstname : "kush", lastname : 'trivedi'}
console.log(firstname); // kush
console.log(lastname); // trivedi
order does not matter here
const {lastname, firstname} = {firstname : "kush", lastname : 'trivedi'}
console.log(firstname); // kush
console.log(lastname); // trivedi
we can set default values using "=", like this:
let options = {
title: "Menu"
};
let {width = 100, height = 200, title} = options;
alert(title); // Menu
alert(width); // 100
alert(height); // 200
Here also default values can be expressions
let options = {
title: "Menu"
};
let {width = prompt("width?"), title = prompt("title?")} = options;
alert(title); // Menu
alert(width); // (whatever the result of prompt is)
Just like we did in Arrays, we can use '...' to destructure objects
let options = {
title : "Menu",
height : 200,
width : 100
};
// title = property named title
// rest = object with the rest of properties
let {title, ...rest} = options;
// now title="Menu", rest={height: 200, width: 100}
alert(rest.height); // 200
Nested destructuring is also possible
let obj = {
first : "kush",
last : "trivedi",
age : { years : 21, months : 3 },
}
let destobj = {first, last, age : { years, months } } = obj;
console.log(years); // 21
When a function has many parameters, and many of these parameters are optional, i.e, are have default values, it becomes difficult to remember the order of parameters.
Destructuring comes to the rescue!
We can pass parameters as an object, and the function immediately destructurizes them into variables:
let obj = {
title : "My menu",
items : ["Item1", "Item2"]
};
function sample({title = "Untitled", width = 200, height = 100, items = []}) {
// title, items – taken from obj,
// width, height – defaults used
alert( `\({title} \){width} ${height}` ); // My Menu 200 100
alert( items ); // Item1, Item2
}
sample(obj);
That's all, hope you enjoyed it.