Note: we’re assuming you’re already read the destructuring section first.
Array destructuring means extracting data from an array (its elements) and storing them into a bunch of variables via a new 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.
const list = [1,2]; const [first, second] = list; console.log(first, second);
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 0th position of the array destructuring.
const list = [1,2]; const [, second] = list; console.log(second);
We can also skip elements in the middle too!
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;