A brief introduction to array destructuring in ES6

Destructuring in JavaScript is a simplified method of extracting multiple properties from an array by taking the structure and deconstructing it down into its own constituent parts through assignments by using a syntax that looks similar to array literals.

It creates a pattern that describes the kind of value you are expecting and makes the assignment. Array destructuring uses position.

See the below code snippet.

var [first, second, third] = ["Laide", "Gabriel", "Jets"];

The Syntax with Destructuring.

var first = "laide",
    second = "Gabriel",
    third = "Jets";

The Syntax Without Destructuring.

You cannot use Numbers for destructuring. Numbers will throw an error because numbers cannot be variable names.

var [1, 2, 3] = ["Laide", "Ola", "Jets"];

This syntax throws an error.

Destructuring has made extracting data from an array very simple and readable. Imagine trying to extract data from a nested array with 5 or 6 levels. That would be very tedious. You use an array literal on the left-hand side of the assignment.

var thing = ["Table", "Chair", "Fan"];
var [a, b, c] = thing;

It takes each variable on the array literal on the left-hand side and maps it to the same element at the same index in the array.

console.log(a); // Output: Table
console.log(b); //Output: Chair
console.log(c); //Output: Fan

Declaration and assignment can be done separately in destructuring.

var first, second;
[first, second] = ["Male", "Female"];

If the number of variables passed to the destructuring array literals are more than the elements in the array, then the variables which aren’t mapped to any element in the array return undefined.

var things = ["Table", "Chair", "Fan", "Rug"];
var [a, b, c, d, e] = things;
console.log(c); //Output: Fan
console.log(d); //Output: Rug
console.log(e); //Output: undefined

If the number of variables passed to the destructuring array literals are lesser than the elements in the array, the elements without variables to be mapped to are just left. There are no errors whatsoever.

var things = ["Table", "Chair", "Fan", "Rug"];
var [a, b, c] = things;
console.log(c); // Output: Fan

Destructuring Returned Arrays

Destructuring makes working with a function that returns an array as a value more precise. It works for all iterables.

function runners(){
    return ["Sandra", "Ola", "Chi"];
}
var [a, b, c] = runners();
console.log(a); //Output: Sandra
console.log(b); //Output: Ola
console.log(c); //Output: Chi

Default Value

Destructuring allows a default value to be assigned to a variable if no value or undefined is passed. It is like providing a fallback when nothing is found.

var a, b;
[a = 40, b = 4] = [];
console.log(a); //Output: 40
console.log(b); //Output: 4
[a = 40, b = 4] = [1, 23];
console.log(a); //Output: 1
console.log(b); //Output: 23

Default values can also refer to other variables including the one in the same array literal.

var [first = "Cotlin", second = first] = [];
console.log(first); //Output: Cotlin
console.log(second); //Output: Cotlin
var [first = "Cotlin", second = first] = ["Koku"];
console.log(first); //Output: Koku
console.log(second); //Output: Koku
var [first = "Cotlin", second = first] = ["Koku", "Lydia"];
console.log(first); //Output: Koku
console.log(second); //Output: Lydia

Ignoring Some Values

Destructuring lets you map a variable to the elements you are interested in. You can ignore or skip the other elements in the array by using trailing commas.

var a, b;
[a, , b] = ["Lordy", "Crown", "Roses"];
console.log(a); //Output: Lordy
console.log(b); //Output: Roses

The Rest Parameter And Spread Syntax

The new (…) operator that was added in ES6 can be used in destructuring. If the (…) operator appear on the left-hand side in destructuring then it is a REST PARAMETER. A Rest parameter is used to map all the remaining elements in the array that have not been mapped to the rest variable itself. It is like gathering what is left behind. The Rest variable must always be the last otherwise a SyntaxError is thrown.

var planets = ["Mercury", "Earth", "Venus", "Mars", "Pluto", "Saturn"];
var [first, , third, ...others] = planets;
console.log(first); //Output: Mercury
console.log(third); //Output: Venus
console.log(others); //Output: ["Mars", "Pluto", "Saturn"]

If the (…) operator appears on the right-hand in destructuring then it is a SPREAD SYNTAX. It takes all the other elements in the array which have no variable mapped to them and then maps it to the rest variable.

var planets = ["Mercury", "Earth", "Venus", "Mars", "Pluto", "Saturn"];
var [first, second, ...rest] = ["Mercury", "Earth", ...planets, "Saturn"];
console.log(first); //Output: Mercury
console.log(second); //Output: Earth
console.log(rest); //Output: ["Venus", "Mars", "Pluto", "Saturn"]

When you can have more variables on the left-hand side, it maps the single elements in the array equally to the variables.

var planets = ["Mercury", "Earth", "Venus", "Mars", "Pluto", "Saturn"];
var [first, second, ...rest] = ["Mercury", ...planets];
console.log(first); //Output: Mercury
console.log(second); //Output: Mercury
console.log(rest); //Output: ["Earth", "Venus", "Mars", "Pluto", "Saturn"]
var planets = ["Mercury", "Earth", "Venus", "Mars", "Pluto", "Saturn"];
var [first, second, third, fourth ...rest] = ["Mercury", "Earth", ...planets];
console.log(first); //Output: Mercury
console.log(second); //Output: Earth
console.log(third); //Output: Mercury
console.log(fourth); //Output: Earth
console.log(rest); //Output: ["Venus", "Mars", "Pluto", "Saturn"]

Interchanging Or Swapping Variables

One destructuring expression can be used in swapping the values of two variables.

var a, b;
[a, b] = ["Male", "Female"];
[a, b] = [b, a];
console.log(a); //Output: Female
console.log(b); //Output: Male

Nested Array Destructuring

You can also do nested destructuring with arrays. The corresponding item must be an array in order to use a nested destructuring array literal to assign items in it to local variables.

var numbers = [8, [1, 2, 3], 10, 12];
var  [a, [d, e, f]] = numbers;
console.log(a); // Output: 8
console.log(d); // Output: 1
console.log(e); // Output: 2

Multiple Array Destructuring

You can destructure an array more than once in the same code snippet.

var places = ["first", "second", "third", "fourth"];
var [a, b, , d] = [f, ...rest] = places;
console.log(a); //Output: first
console.log(d); //Output: fourth
console.log(f); //Output: first
console.log(rest); //Output: ["second", "third", "fourth"]

Conclusion

You can copy and paste the code on Babel’s website to see what the code would look like if destructuring did not exist. You would have written more lines of code, but destructuring simplifies it all.