ES6 Array destructuring

Destructuring means to break down a complex structure into simpler parts. With the syntax of destructuring, you can extract smaller fragments from objects and arrays. It can be used for assignments and declaration of a variable.

Destructuring is an efficient way to extract multiple values from data that is stored in arrays or objects. When destructuring an array, we use their positions (or index) in an assignment.

Let us try to understand the array destructuring by using some illustrations:

var arr = ["Hello", "World"]

// destructuring assignment
var [first, second] = arr;

console.log(first); // Hello
console.log(second); // World

In the above example, the left-hand side of destructuring assignment is for defining what values are required to unpack from sourced variable.

Let us take another example of array destructuring.

var colors = ["Violet", "Indigo", "Blue", "Green", "Yellow", "Orange", "Red"];

// destructuring assignment
var[color1, color2, color3] = colors;

console.log(color1); // Violet
console.log(color2); // Indigo
console.log(color3); // Blue

If you want to choose random elements from the given array then in array destructuring you can perform it as follows:

var colors = ["Violet", "Indigo", "Blue", "Green", "Yellow", "Orange", "Red"];

// destructuring assignment
var[color1, ,color3, ,color5] = colors; //Leave space for unpick elements
console.log(color1); // Violet
console.log(color3); // Blue
console.log(color5); // Yellow

In the above example, we have defined an array named colors which has seven elements. But we have to show three random colors from the given array that are Violet, Blue, and Yellow. These array elements are in positions 0, 2, and 4.

During destructuring, you have to leave the space for unpick elements, as shown in the above example. Otherwise, you will get unintended results.

Array destructuring and Rest operator

By using the rest operator (…) in array destructuring, you can put all the remaining elements of an array in a new array.

Let us try to understand it with an example.

var colors = ["Violet", "Indigo", "Blue", "Green", "Yellow", "Orange", "Red"];

// destructuring assignment
var [a,b,...args] = colors;
console.log(a); 
console.log(b); 
console.log(args);

Array destructuring and Default values

If you are taking a value from the array and that value is undefined, then you can assign a default value to a variable.

var x, y;

[x=50, y=70] = [100];
console.log(x); // 100
console.log(y); // 70

Swapping Variables

The values of the two variables can be swapped in one destructuring expression. The array destructuring makes it easy to swap the values of variables without using any temporary variable.

var x = 100, y = 200;
[x, y] = [y, x];
console.log(x); // 200
console.log(y); // 100

Parsing returned array from functions

A function can return an array of values. It is always possible to return an array from a function, but array destructuring makes it more concise to parse the returned array from functions.

Let us understand it with an example.

function array() {
    return [100, 200, 300];
}
 
var [x, y, z] = array();
 
console.log(x); // 100
console.log(y); // 200
console.log(z); // 300

In the above example, we have defined the array() function, which returns an array containing three elements. We used array destructuring to destructure the above array elements into specific elements x, y, and z in a single line of code.