Destructuring in ES6

To destructure means to dismantle the structure of something. In Javascript, it could be an array, an object or a string whereby they are broken down individually and then reassigned to variables.
Destructuring Arrays
Prior to ES6, if you were to assign the values of an array to individual variables, it would be done like this:

var scores = [500, 400, 300];

var x = scores[0],
    y = scores[1],
    z = scores[2];

    console.log(x,y,z); // 500 400 300

But then ES6 came along. Let’s see how that changed things in the example below:

let scores = [500, 400, 300];

let [x, y, z] = scores;

console.log(x,y,z); //500 400 300

It’s easy to understand. We destructured the values of the scores array and created variables that would inherit the elements of the array in the order they were defined. So let x be the first element of the scores array which is 500, let y be the second element which is 400 and let z be the third element.

Note that [x, y, z] is not a new array.

In a case where we destructure an array and create more variables than the elements of the array, each variable that has no element to inherit returns undefined. Example below:

let scores = [500, 400, 300];

let [x, y, z, w] = scores;

console.log(x,y,z,w); //500 400 300 undefined

We added a new variable ‘w’ but since there was no element left for it to inherit from the destructured array, it returned as undefined.

A default value can be assigned to w as it has no element left to inherit, see example below:

let scores = [500, 400, 300];

let [x, y, z, w = 200] = scores;

console.log(x,y,z,w); //500 400 300 200

Skipping elements in the original array

In a situation where you would want to skip the order of inheritance and jump to a different element in the array, it is done by putting a comma at the position of the element to be skipped in the original array with white spaces between the commas. Have a look:

let scores = [500, 400, 300];

let [, x, y] = scores;

console.log(x, y); // 400 300 

We skipped the first element in the array (500) and the started assigning from the second element.

Using Rest Parameter

It is assumed that you are already familiar with the Rest parameters and Spread syntax and how to use them.

let scores = [500, 400, 300];

let [x, ...y] = scores;

console.log(x); // 500

console.log(y); // [400, 300]

In the example above, x is assigned to the first element in the array and the “rest” of the elements are assigned to y using the rest parameter syntax “…” which returns an array containing the elements assigned to it.

Destructuring Objects

In the examples above, we were destructuring arrays. Now let us see how we can destructure objects starting with an example:

let scores = {
    pass: 70,
    avg: 50,
    fail: 30
};

let { pass, avg, fail} = scores;

console.log(pass, avg, fail); // 70 50 30

You can already see the differences — curly brackets and the fact that we used the object names as the variable names while destructuring; changing the names would return undefined but that doesn’t mean you are forced to use them. Let us see how you can override the object names:

let scores = {
    pass: 70,
    avg: 50,
    fail: 30
};

let { pass: one, avg: two, fail: three} = scores;

console.log(one, two, three); // 70 50 30

Now we have assigned new variable names that would override the default object names.

Destructuring Strings

let [user, interface] = 'UI';

console.log(user); // U

console.log(interface); // I

Here, the string “UI” is separated individually and assigned to the variables created. But what if we had more characters like “UI is important ” in the string? What would be the output? The output will remain the same as destructuring of strings is not done word after word but rather character after character so the ‘U’ character gets assigned first followed by the ‘I’ even though they are grouped together in the string.

That does it for this article. I hope that at this point, you have understood how destructuring works and would be comfortable using them as you progress as a developer. Thank you for reading. Happy coding!