In this section, we will learn what the Array destructuring is and how to use it in JavaScript.

Note: we’re assuming you’re already read the destructuring section first.

What is Array Destructuring in JavaScript?

Array destructuring means extracting data from an array (its elements) and storing them into a bunch of variables via a new syntax.

JavaScript Array Destructuring Syntax

Here’s the syntax of array destructuring:

let|| const|| var [

var1,

varn

] = target_array;

`declaration`: if the variables that we want the values to be assigned to them are not declared already, we need to put either of the keywords: `var`, `let`, `const` in front of the open bracket `[` to declare the variables.

`[]`: For destructuring an array, we use a pair of brackets `[]`.

`var1, varn`: Inside the brackets `[ ]`we set the variables that we want the values of the target array to be assigned to them.

Note: the first variable will take the first element of the array; the second variable takes the second element and so on…

`target_array`: This is the array that we want to extract its elements.

Example: using Array destructuring in JavaScript

const list = [1,2];
const [first, second] = list;
console.log(first, second);

Output:

1 2

Here, via the array destructuring, we’ve created two identifiers named `first` and `second` and initialized them via the first and second elements of the `list` array, respectively.

It’s valid to leave out elements we don’t want from the target array.

Note: in the example below, notice that there’s no variable in the 0^th position of the array destructuring.

Example: JavaScript Array Destructuring and leaving out elements

const list = [1,2];
const [, second] = list;
console.log(second);

Output:

2

We can also skip elements in the middle too!

Example: JavaScript array destructuring skip elements in the middle

const list = [1,2,3,4,5,6];
const [,,first,, second] = list;
console.log(first, second);

Output: 3 5

Here, the first and the second elements of the `list` array are skipped and the third element is stored in the `first` identifier. After that, the fourth element is skipped as well and the fifth element stored in the `second` identifier.

Note: try not to leave out more than a couple of elements because the readability will suffer in that case.

Let’s run another example:

const arr = [1, 2]

let first, second

console.log("ASI hazard")

[first, second] = arr // TypeError: Cannot set property 'undefined' of undefined

console.log(first, second);

The example above fails because the compiler treats the `[first, second]` as a property accessor (with a comma expression inside) that’s setting a property on whatever `console.log` returns, as though you’ve written:

console.log ("ASI hazard") [first, second] = arr;

To solve this problem, we need to use the semicolon `;` to separate the two statements from each other:

console.log("ASI hazard");

[first, second] = arr;

JavaScript Array Destructuring and Default Values

This is explained in the JavaScript destructuring and default values section.