Spread vs Rest — Clean Patterns for Modern JavaScript
Modern JavaScript introduced powerful syntax that makes working with data cleaner and more expressive. Two of the most commonly used features are the spread (...) and rest (...) operators.
Interestingly, both use the same syntax—but behave very differently.
Let’s break them down.
🚀 What is the Spread Operator?
The spread operator is used to expand (unpack) elements from an iterable (like arrays, strings, or objects).
👉 Think of it as: “Take this structure and spread its values out.”
Example: Arrays
const arr1 = [1, 2, 3];
const arr2 = [...arr1];
console.log(arr2); // [1, 2, 3]
Example: Combining Arrays
const a = [1, 2];
const b = [3, 4];
const combined = [...a, ...b];
console.log(combined); // [1, 2, 3, 4]
Example: Objects
const user = { name: "John" };
const updatedUser = { ...user, age: 25 };
console.log(updatedUser);
// { name: "John", age: 25 }
📦 What is the Rest Operator?
The rest operator is used to collect multiple elements into a single structure.
👉 Think of it as: “Gather remaining values into one variable.”
Example: Function Parameters
function sum(...numbers) {
return numbers.reduce((acc, num) => acc + num, 0);
}
console.log(sum(1, 2, 3)); // 6
Here, ...numbers collects all arguments into an array.
Example: Array Destructuring
const arr = [1, 2, 3, 4];
const [first, ...rest] = arr;
console.log(first); // 1
console.log(rest); // [2, 3, 4]
🔥 Spread vs Rest (Key Difference)
| Feature | Spread Operator | Rest Operator |
|---|---|---|
| Purpose | Expands values | Collects values |
| Usage | Right-hand side | Left-hand side |
| Use Case | Copy, merge, pass values | Function params, destructuring |
🧠 Core Idea (Most Important for Interviews)
Spread → Expanding values
Rest → Collecting values
Even though syntax is the same (...), 👉 context decides behavior
📊 Visual Understanding
Spread (Expanding)
[1, 2, 3]
↓
...arr
↓
1, 2, 3
Rest (Collecting)
1, 2, 3
↓
...rest
↓
[1, 2, 3]
💡 Practical Use Cases
1. Copying Arrays (Immutable Approach)
const original = [1, 2, 3];
const copy = [...original];
2. Updating State (React Pattern)
const newState = { ...state, isLoggedIn: true };
3. Removing Elements
const [_, ...remaining] = [10, 20, 30];
console.log(remaining); // [20, 30]
4. Flexible Functions
function logAll(...args) {
console.log(args);
}
5. Merging Objects
const obj1 = { a: 1 };
const obj2 = { b: 2 };
const merged = { ...obj1, ...obj2 };
⚠️ Common Mistakes
❌ Confusing Spread with Rest
const [...a] = [1, 2, 3]; // Rest (collecting)
const b = [...a]; // Spread (expanding)
❌ Order Matters in Objects
const obj = { a: 1, ...{ a: 2 } };
console.log(obj); // { a: 2 }
👉 Later values overwrite earlier ones.
🧪 Interview Insight
Interviewers love testing this:
Difference between spread & rest
Use in destructuring
Immutability patterns
Real-world usage (React, APIs, etc.)
👉 Focus on mental model, not memorization.
🏁 Final Thoughts
The spread and rest operators are simple but incredibly powerful.
Use spread when you want to expand data
Use rest when you want to collect data
Mastering this distinction will make your JavaScript cleaner, more readable, and interview-ready.