> ## Documentation Index
> Fetch the complete documentation index at: https://docs.syntblaze.com/llms.txt
> Use this file to discover all available pages before exploring further.
# JavaScript Array Destructuring
Array destructuring is a syntax pattern in JavaScript that extracts values from iterable objects and binds them to variables. It can be utilized within both variable declarations and assignment expressions. It operates via the iterable protocol, invoking the `[Symbol.iterator]()` method of the right-hand operand to sequentially unpack values.
```javascript theme={"dark"}
// Variable declaration
const [variable1, variable2] = iterable;
// Assignment expression
[variable1, variable2] = iterable;
```
## Sequential Assignment
Variables in the destructuring pattern are mapped to the elements of the iterable sequentially based on the iteration order (the sequence of values yielded by the iterator), not by property index. If the number of variables exceeds the number of yielded values, the unmatched variables are initialized to `undefined`.
```javascript theme={"dark"}
const [first, second, third] = [10, 20];
// first: 10
// second: 20
// third: undefined
```
## Elision (Skipping Elements)
Specific elements in the iterable can be ignored by omitting a variable identifier while retaining the comma separator. This advances the iterator without binding the value.
```javascript theme={"dark"}
const [a, , c, , e] = [1, 2, 3, 4, 5];
// a: 1
// c: 3
// e: 5
```
## Rest Binding
The rest operator (`...`) collects all remaining, unassigned elements yielded by the iterator into a standard JavaScript Array. The rest element must be the final element in the destructuring pattern; otherwise, a `SyntaxError` is thrown. However, the rest element does not have to be a simple identifier—it can also be a nested destructuring pattern.
```javascript theme={"dark"}
const [head, ...tail] = [1, 2, 3, 4];
// head: 1
// tail: [2, 3, 4]
const [a, ...[b, c]] = [1, 2, 3, 4];
// a: 1
// b: 2
// c: 3
```
## Default Values
Variables can be assigned default values. The default value is evaluated and applied strictly if the extracted value at that position is strictly `undefined` (not `null`, `false`, or `0`).
```javascript theme={"dark"}
const [x = 5, y = 7, z = 9] = [1, undefined, null];
// x: 1
// y: 7 (fallback applied due to undefined)
// z: null (fallback ignored)
```
## Nested Destructuring
Destructuring patterns can be nested to mirror the structure of multi-dimensional arrays or nested iterables.
```javascript theme={"dark"}
const [a, [b, c], d] = [1, [2, 3], 4];
// a: 1
// b: 2
// c: 3
// d: 4
```
## Assignment to Existing Variables
Destructuring can be used to reassign values to previously declared variables. Unlike object destructuring, array destructuring assignments do not require wrapping the entire statement in parentheses.
When starting a line with `[` for an assignment, the preceding statement must be explicitly terminated with a semicolon. If omitted, Automatic Semicolon Insertion (ASI) fails, and the JavaScript engine interprets the `[` as a property accessor for the previous line's evaluated result, which will throw a `TypeError` or `SyntaxError`.
```javascript theme={"dark"}
let a = 1;
let b = 2;
// The preceding semicolon is mandatory if the previous line lacks one
;[a, b] = [10, 20];
// a: 10
// b: 20
```
## Iterable Compatibility
Because array destructuring relies on the iterable protocol rather than `Array.prototype`, it can be applied to any object that implements `[Symbol.iterator]()`, including Strings, Sets, Maps, and generator functions.
```javascript theme={"dark"}
const [char1, char2] = "JS";
// char1: "J"
// char2: "S"
const [firstElement] = new Set(['alpha', 'beta']);
// firstElement: "alpha"
```
Tired of Poor JavaScript Skills? Fix That With Deep Grasping!
Learn More
