ECMAScript 6 Array destructuring and Object destructuring

Nerd, Solutions 

An array destructuring assignment is used to extract the values of an iterable object, and assign them to the variables. The name array destructuring is derived from its syntax, because it resemble array construction literal.


By using array destructuring assignment, we can assign array elements value into normal variable, pretty easily.

Example code:

This code will assign array values into each variable according to its position.

They are two syntax for array destructuring assignment. One of the way to use array destructuring assignment has been described above. But the method described above is very long. We can use short syntax to achieve the same effect.

Code example:

Or like this

The above code will achieve the same effect.

Something to note: If we place a non-iterable object on the right side of the equal sign. ES6 engine is going to throw a TypeError exception.

We can use rest operator in the left side of array destructuring assignment.

Code example:

 Default values for variables

We can use destructuring with default variables. This default value is going to be used when array element is undefined.

Code example:

In the code above, array has two elements instead of three elements, so the third elements is set to undefined by defaults. This will trigger ES6 engine to use the default value for variable c, which is set by default to 1.

Nested Array destructuring

We can also extract the values from a multi-dimensional array and assign them to variables.

Code example:

 Using the destructuring assignment as a function parameter

Array destructuring assignment can be used as a function parameter. This can be useful, if we want to assign array values to variables without looping them. This will only work if the passed parameter is an iterable object (array).

Code example:

function invocation

 When the test function is invoked, with the array passed as its parameter. Array elements are going to be assigned to variables a, b, and c respectively. And then their values are going to be logged into the console.

We can also define a default value for our destructuring argument, like normally would do for argument.

Code example:

 When test function is invoked without parameter. Array with elements 1, 2, 3 will be used as default array for array destructuring assignment.

Object Destructuring assignment

An object destructuring assignment is used to extract property values of an object and assign them to the variables.

In ES5, to achieve this we will need to extract individual object property value and then assign them to variable. using this syntax:

Code example:

The above code example will extract object property value and assign it to variable numberOne.

But all this can be achieved with more ease in ES6. To achieve this in ES6 we use object destructuring assignment.

Code Example:

The above code will assign object property value into numberOne variable. The above syntax can be used when your variable names are different from object property names. If you use the same name as the object property name, we can use this syntax:

Code example:

This code will achieve the same effect as the one above. Or we can use the more shorter syntax, in which we define object and variable in the same line.

Code Example:

 The above code will achieve the same effect as the previous code. They both will extract numberOne object property and assign its value into the numberOne variable. When we use object destructuring assignment and object declaration on the same line we do not need to use () brackets.

We can also pass object destructuring assignment as a parameter, like we can pass array destructuring assignment.

Code Example:

As you can see in the above code, we have define function test, that will accept object as its parameter and use object destructuring assignment to assign object property values into specified variables. The above code will only work if the object has the same property name as variables.

Also the above code show we can use default value in our object destructuring parameter.