JavaScript Spread and Rest Operators (...): Complete Guide
Direct Answer & Key Concept
The three dots (...) in JavaScript represent either the spread operator or rest parameters depending on context. Spread unpacks elements into an iterable, while rest condenses multiple elements into a single array.
Runnable Code SnippetRun in Playground
// Spread and Rest in Action
const teamA = ["Alice", "Bob"];
const teamB = ["Charlie", "Diana"];
// Spread: Merge arrays
const allMembers = [...teamA, ...teamB];
console.log("All members:", allMembers); // ["Alice", "Bob", "Charlie", "Diana"]
// Rest: Gather function arguments
const logLeaderAndMembers = (leader, ...members) => {
console.log("Leader:", leader);
console.log("Team:", members);
};
logLeaderAndMembers(...allMembers);
// Leader: Alice
// Team: ["Bob", "Charlie", "Diana"]What are the Spread and Rest operators in JavaScript?
The three consecutive dots (...) syntax in JavaScript serves two complementary purposes governed by where it appears in your code:
- Spread Operator: Unpacks an array or object into individual elements. Used in array literals, object literals, and function invocation arguments.
- Rest Parameters: Collects multiple individual elements into a single array. Used in function parameter declarations and destructuring patterns.
When to use the Spread Operator
1. Shallow Cloning Objects and Arrays
Spread creates a clean shallow copy without mutating the original reference:
const original = [1, 2, 3];
const clone = [...original];
clone.push(4);
console.log("Original:", original); // [1, 2, 3] (Untouched)
console.log("Clone:", clone); // [1, 2, 3, 4]
2. Merging Arrays and Objects
const baseConfig = { timeout: 5000, debug: false };
const envConfig = { debug: true, env: "production" };
// Latter properties override earlier ones
const finalConfig = { ...baseConfig, ...envConfig, port: 8080 };
console.log(finalConfig);
// { timeout: 5000, debug: true, env: "production", port: 8080 }
When to use Rest Parameters
Rest parameters allow functions to accept variable numbers of arguments cleanly as a real Array instance:
function calculateScore(bonus, ...points) {
const sum = points.reduce((acc, curr) => acc + curr, 0);
return sum + bonus;
}
console.log(calculateScore(10, 5, 15, 20)); // 50
Common Mistakes with Spread and Rest
- Assuming spread creates a deep clone: Spread copies only top-level properties (shallow copy). Nested objects and arrays still share memory references. Use
structuredClone()for true deep cloning. - Placing rest parameters before other parameters: Rest parameters must always be the final parameter in a function signature:
function test(...rest, last)throws aSyntaxError: Rest parameter must be last formal parameter.