> ## 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 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.
```javascript theme={"dark"}
// 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.
```javascript theme={"dark"}
// 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`.
Tired of Poor JavaScript Skills? Fix That With Deep Grasping!
Learn More
