> ## 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 Object Spread
The `...` token in JavaScript represents two distinct contextual operations: **Spread syntax** and **Rest parameters**. Spread syntax expands an iterable or object into individual elements or properties, while Rest parameters condense multiple discrete elements or properties into a single array or object. The behavior is entirely determined by whether the operator is used in an *evaluation/expression* context (Spread) or a *binding/assignment* context (Rest).
## Spread Syntax (Expansion)
Spread syntax operates by unpacking values from a source. The underlying mechanism depends on the data type being spread.
When applied to iterables (Arrays, Strings, Maps, Sets), the `...` operator consumes the object's `Symbol.iterator` method, sequentially yielding each value until the iterator is exhausted.
```javascript theme={"dark"}
// Function argument expansion
myFunction(...iterable);
// Array literal expansion
const newArray = [...iterable];
```
When applied to object literals, Spread syntax does not use the iterator protocol. Instead, it performs a shallow read of the source object's *enumerable own properties* and defines them on the target object. It is functionally analogous to `Object.assign()`, though Spread defines new properties rather than invoking setters.
```javascript theme={"dark"}
// Object literal expansion
const newObject = { ...sourceObject };
```
**Technical Characteristics of Spread:**
* **Shallow Copying:** Spread only copies values at the first level of depth. Nested objects or arrays are copied by reference, not by value.
* **Evaluation Order:** In object literals, properties are evaluated from left to right. If a spread object contains a key that already exists in the target, the later value overwrites the earlier one.
* **Type Restrictions:** Attempting to spread a non-iterable (like a standard object) into an array literal or function call will throw a `TypeError`.
## Rest Parameters (Condensation)
Rest syntax operates by packing remaining, unassigned values into a newly allocated structure. It is exclusively used in destructuring assignments and function parameter declarations.
In function signatures, the Rest parameter collects an indefinite number of trailing arguments into a standard JavaScript Array. Unlike the legacy `arguments` object, a Rest parameter is a true `Array` instance, inheriting all `Array.prototype` methods.
```javascript theme={"dark"}
// Function parameter condensation
function fn(firstArg, ...restArgs) {
// restArgs is an Array
}
```
In destructuring assignments, the Rest operator collects the remaining unmapped elements or properties from the right-hand side of the assignment into a new array or object.
```javascript theme={"dark"}
// Array destructuring
const [firstElement, ...remainingElements] = sourceArray;
// Object destructuring
const { specificKey, ...remainingProperties } = sourceObject;
```
**Technical Characteristics of Rest:**
* **Terminal Position Requirement:** A Rest element must always be the final element in a destructuring pattern or function signature. Placing a comma or another variable after a Rest element results in a `SyntaxError`.
* **Exclusion of Prototype Chain:** When used in object destructuring, the Rest operator only collects enumerable own properties that were not explicitly destructured. It ignores properties on the prototype chain.
* **Empty State:** If there are no remaining elements or arguments to collect, the Rest parameter evaluates to an empty array `[]` or an empty object `{}`, rather than `undefined`.
Tired of Poor JavaScript Skills? Fix That With Deep Grasping!
Learn More
