Array destructuring – everything we need to know

We already spoke about object destructuring in the article What is object destructuring in JavaScript? Today, we are going to speak about array destructuring.

Array destructuring is useful when working with arrays and we want to extract some data. Even React frameworks use this type of array manipulation when working with hooks like useState.

The syntax is pretty straightforward const [props] = array. In the square brackets [] we provide the variable names and after equal sign = we provide the name of the array that we want to extract data from.

const arr = ['a', 'b', 'c']

let [a, b, c] = arr;
console.log(a,b,c);

//Result:
//a,b,c

As we have shown in the example above, we can extract multiple values at once. We can’t use numbers as variable names while destructuring, because numbers are not valid variable names. The following example will throw an error.

const arr = ['a', 'b', 'c']

let [1,2,3] = arr;
console.log(1,2,3);

//Result:
//Uncaught SyntaxError: Invalid destructuring assignment target

If we pass less variable to the destructuring array literals are more than there are elements in the array, then, variables that are not mapped will return undefined.

const arr = ['a', 'b', 'c']

let [a,b,c,d] = arr;
console.log(a,b,c,d);

//Result:
//a b c undefined

But what happens when we provide a smaller number of variables? Then, JS will map from left to right and the elements that are not mapped will be skipped, without any error.

const arr = ['a', 'b']

let [a,b] = arr;
console.log(a,b);

//Result: 
//a b

Default value

Like object destructuring, we can provide a default value if the value does not exist.

const arr = ['a', 'b']

let [a,b, c="not set"] = arr;
console.log(a,b,c);

//Result: 
//a b not set

If we use default values, we can avoid undefined.

Array destructuring ignore values

Up until now, we saw that we can extract values, create default values, but what if we want to ignore values. For that, all we need to do is provide an “empty parameter”, by using trailing commas.

const arr = ['a', 'b', 'c'];

let [a,,c] = arr;
console.log(a,b,c);
//Result:
//Uncaught ReferenceError: b is not defined

console.log(a,c)
//Result:
//a,c

As we can see in the example above, we skipped the second property of an array. And when we decided to return b, it throw an error. But, when we returned a,c without b it worked perfectly.

Rest operator

We can use the rest operator (...) with array destructuring, as we did with object destructuring. The rest operator (...) will return everything that was not mapped by other parameters, before the rest operator (...).

const arr = ['a', 'b', 'c'];

let [a,...arrayRest] = arr;
console.log(a, arrayRest);

//Result:
//a ['b', 'c']

Using array destructuring is useful when we want to swap values of variables.

let [city, state] = ["Berlin", "Germany"];

[city, state] = [state, city];
console.log(city, state);

//Result:
//Germany Berlin

Destructuring nested array

Often we work with arrays that are nested. We destructure those by providing the “road map” to these values in form of square brackets.

var numbers = [8, [1, 2, 3], 10, 12];
var  [a, [d, e, f]] = numbers;

console.log(a); // Result: 8
console.log(d); // Result: 1
console.log(e); // Result: 2

If you have any questions or anything you can find me on my Twitter, or you can read some of my other articles like for…of loop in JavaScript.