Array Spread

The ... token in JavaScript represents two distinct syntactic features depending on its lexical context: Spread syntax and Rest syntax. Spread syntax expands an iterable or object into individual elements or properties, while Rest syntax condenses multiple discrete elements or properties into a single array or object binding.

Spread Syntax (Expansion)

Spread syntax operates by unpacking values from a source. When applied to iterables (like Arrays, Strings, Maps, or Sets), it invokes the object’s [Symbol.iterator]() method to extract values. When applied to objects, it extracts enumerable own properties.

Contexts: Function invocations, array literals, and object literals.

// Array/Iterable expansion
const newArray = [1, ...[2, 3], 4];
console.log(newArray); // Output: [1, 2, 3, 4]

// Function argument expansion
const maxVal = Math.max(1, ...[5, 9], 2);
console.log(maxVal); // Output: 9

// Object property expansion (ES2018)
const newObject = { x: 1, ...{ y: 2, z: 3 } };
console.log(newObject); // Output: { x: 1, y: 2, z: 3 }

Technical Characteristics:

• Multiple Usage: The spread operator can be used multiple times within the same expression.
• Evaluation Order: Elements or properties are evaluated and inserted in the exact order they appear in the literal. Subsequent object properties with the same key will overwrite preceding ones.
• Shallow Operation: Spread performs a shallow read. Nested objects or arrays are copied by reference, not by value.

Rest Syntax (Condensation)

Rest syntax operates by packing remaining, unassigned values into a newly allocated data structure. It acts as a catch-all for trailing elements during assignment or function execution.

Contexts: Function parameter declarations and destructuring assignments.

// Rest parameters in function signatures
function countArgs(first, ...restParams) {
  return restParams.length;
}
console.log(countArgs(10, 20, 30)); // Output: 2

// Rest elements in array destructuring
const [firstElement, ...restElements] = [10, 20, 30];
console.log(restElements); // Output: [20, 30]

// Rest properties in object destructuring
const { a, ...restProperties } = { a: 1, b: 2, c: 3 };
console.log(restProperties); // Output: { b: 2, c: 3 }

// Rest element as a nested destructuring pattern
const [x, ...[y, z]] = [1, 2, 3];
console.log(y, z); // Output: 2 3

Technical Characteristics:

• Terminal Position: A rest element or parameter must be the final entry in its destructuring pattern or parameter list. Placing a comma or another variable after a rest element throws a SyntaxError. However, in array destructuring and function parameters, this final rest element is not restricted to a simple identifier; it can itself be a destructuring pattern (e.g., function f(...[a, b]) {}).
• Instance Type: In array destructuring and function parameters, the rest binding is always a true Array instance, granting access to Array.prototype methods (unlike the legacy array-like arguments object). In object destructuring, it is a plain Object.
• Empty States: If there are no remaining elements or properties to collect, the rest binding evaluates to an empty array [] or an empty object {}, rather than undefined.

Master JavaScript with Deep Grasping Methodology!

Learn More