Rest Element Destructuring

Rest element destructuring is a syntax feature in JavaScript that collects remaining, unassigned elements from an iterable or enumerable own properties from an object into a new array or object variable during a destructuring assignment. It is denoted by three dots (...) followed by a target identifier.

Array (Iterable) Destructuring

When applied to an iterable, the rest element extracts all elements that have not been explicitly mapped to preceding variables and assigns them to a standard JavaScript Array.

const [first, second, ...remainingElements] = [10, 20, 30, 40, 50];

console.log(first);             // 10
console.log(second);            // 20
console.log(remainingElements); // [30, 40, 50]

If the iterable is exhausted before the rest element is evaluated, the identifier is initialized as an empty array ([]), not undefined.

const [a, b, ...rest] = [1, 2];
console.log(rest); // []

Object Destructuring

When applied to an object, the rest element iterates over the source object’s keys and extracts all enumerable own properties that were not explicitly destructured. These properties are assigned to a newly created standard JavaScript Object.

const { a, b, ...remainingProperties } = { a: 1, b: 2, c: 3, d: 4 };

console.log(a);                   // 1
console.log(b);                   // 2
console.log(remainingProperties); // { c: 3, d: 4 }

Similar to arrays, if no unassigned properties remain, the rest element evaluates to an empty object ({}).

Technical Constraints and Rules

1. Positional Requirement The rest element must strictly be the final element in the destructuring pattern. Attempting to place variables after the rest element results in a SyntaxError.

// SyntaxError: Rest element must be last element
const [x, ...rest, y] = [1, 2, 3, 4]; 

// SyntaxError: Rest element must be last element
const { a, ...rest, b } = { a: 1, b: 2, c: 3 };

2. Trailing Commas A trailing comma immediately following a rest element is syntactically invalid and will throw a SyntaxError.

// SyntaxError: comma is not permitted after the rest element
const [x, ...rest,] = [1, 2, 3];

3. Shallow Copying The rest element performs a shallow copy of the remaining data. If the extracted elements or properties are objects or arrays, the new rest variable holds references to those original structures in memory, not deep clones.

const source = { a: 1, b: { c: 2 } };
const { a, ...rest } = source;

rest.b.c = 99;
console.log(source.b.c); // 99 (Reference is shared)

4. Prototype Chain Exclusion During object destructuring, the rest element only collects enumerable own properties. It does not traverse the prototype chain to collect inherited properties.

const parent = { inherited: true };
const child = Object.create(parent);
child.own = true;
child.otherOwn = true;

const { own, ...rest } = child;

console.log(rest); // { otherOwn: true } (Does not include 'inherited')

Master JavaScript with Deep Grasping Methodology!

Learn More