ES6 Destructuring

 The Destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

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.

Assuming that you have a function that returns an array of numbers as follows:

function getScores() {

    return [70, 80, 90];

 }

let [x, y, z] = getScores();

console.log(x); // 70

console.log(y); // 80

console.log(z); // 90

The variables x, y and z will take the values of the first, second, and third elements of the returned array.

Note that the square brackets [] look like the array syntax but they are not.

If the getScores() function returns an array of two elements, the third variable will be undefined.

In case the getScores() function returns an array that has more than three elements, the remaining elements are discarded. 

Array Destructuring Assignment and Rest syntax

It’s possible to take all remaining elements of an array and put them in a new array by using the rest

syntax (...):

function getScores() {

    return [70, 80, 90, 100];

 }

 let [x, y ,...args] = getScores();

console.log(x); // 70

console.log(y); // 80

console.log(args); // [90, 100]

The variables x and y receive values of the first two elements of the returned array. And the args variable receives all the remaining arguments, which are the last two elements of the returned array.

let [name1, name2, ...rest] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];

// rest is array of items, starting from the 3rd one

alert(rest[0]); // Consul

alert(rest[1]); // of the Roman Republic

alert(rest.length); // 2

The value of rest is the array of the remaining array elements.

We can use any other variable name in place of rest, just make sure it has three dots before it and goes last in the destructuring assignment.

Ignore elements using commas

Unwanted elements of the array can also be thrown away via an extra comma:

// second element is not needed

let [firstName, , title] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];

alert( title ); // Consul

In the code above, the second element of the array is skipped, the third one is assigned to title, and the rest of the array items is also skipped (as there are no variables for them).

Default values

If the array is shorter than the list of variables at the left, there’ll be no errors. Absent values are considered undefined.

If we want a “default” value to replace the missing one, we can provide it using =:

// default values

let [name = "Guest", surname = "Anonymous"] = ["Julius"];

alert(name);    // Julius (from array)

alert(surname); // Anonymous (default used)