by Kevwe Ochuko

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: Tableconsole.log(b); //Output: Chairconsole.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: Fanconsole.log(d); //Output: Rugconsole.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: Sandraconsole.log(b); //Output: Olaconsole.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: 40console.log(b); //Output: 4
[a = 40, b = 4] = [1, 23];console.log(a); //Output: 1console.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: Cotlinconsole.log(second); //Output: Cotlin
var [first = "Cotlin", second = first] = ["Koku"];console.log(first); //Output: Kokuconsole.log(second); //Output: Koku
var [first = "Cotlin", second = first] = ["Koku", "Lydia"];console.log(first); //Output: Kokuconsole.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: Lordyconsole.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: Mercuryconsole.log(third); //Output: Venusconsole.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: Mercuryconsole.log(second); //Output: Earthconsole.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: Mercuryconsole.log(second); //Output: Mercuryconsole.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: Mercuryconsole.log(second); //Output: Earthconsole.log(third); //Output: Mercuryconsole.log(fourth); //Output: Earthconsole.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: Femaleconsole.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: 8console.log(d); // Output: 1console.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: firstconsole.log(d); //Output: fourthconsole.log(f); //Output: firstconsole.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.