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.

// 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.

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.

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.

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).

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.

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.

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.

const [char1, char2] = "JS";
// char1: "J"
// char2: "S"

const [firstElement] = new Set(['alpha', 'beta']);
// firstElement: "alpha"

Master JavaScript with Deep Grasping Methodology!

Learn More