> ## 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 Function Call Spread
The `...` token in JavaScript represents two distinct syntactic mechanisms 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.
## Spread Syntax (`...`)
Spread syntax operates by evaluating an expression and expanding it in places where zero or more arguments, elements, or key-value pairs are expected.
**Mechanics:**
* **Iterables:** When used in array literals or function calls, the spread operator requires the source operand to implement the `@@iterator` method (`Symbol.iterator`). It consumes the iterator and places each yielded value into the new context.
* **Objects:** When used in object literals, spread syntax enumerates the own, enumerable properties of the source object and copies their key-value pairs onto the target object. It performs a shallow copy; nested objects are copied by reference.
**Syntax Visualization:**
```javascript theme={"dark"}
// 1. Array/Iterable Expansion (Elements)
const newArray = [...iterableObject, additionalElement];
// 2. Object Expansion (Key-Value Pairs)
const newObject = { ...sourceObject, newProperty: value };
// 3. Function Argument Expansion (Arguments)
targetFunction(...iterableObject);
```
## Rest Syntax (`...`)
Rest syntax acts as the inverse of spread. It collects multiple elements and condenses them into a single entity. It is exclusively used in assignment contexts, specifically within function parameter definitions and destructuring assignments.
**Mechanics:**
* **Function Parameters:** Collects all remaining arguments passed to a function into a standard JavaScript `Array` instance. Unlike the legacy `arguments` object, a rest parameter is a true array, meaning methods like `map`, `filter`, and `reduce` are directly available.
* **Destructuring:** During array or object destructuring, the rest operator binds the remaining unassigned iterable values into a new array, or the remaining unassigned enumerable own properties into a new object.
* **Constraint:** A rest parameter or rest element must always be the final element in its respective destructuring pattern or function signature.
**Syntax Visualization:**
```javascript theme={"dark"}
// 1. Rest Parameters (Function Declaration)
function targetFunction(firstParam, ...remainingParamsArray) {
// remainingParamsArray is an Array instance
}
// 2. Rest Elements (Array Destructuring)
const [firstElement, ...remainingElementsArray] = iterableObject;
// 3. Rest Properties (Object Destructuring)
const { extractedProp, ...remainingPropertiesObject } = sourceObject;
```
Tired of Poor JavaScript Skills? Fix That With Deep Grasping!
Learn More
