Skip to main content

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.

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