JavaScript has evolved a lot over the years, and with ES6 came two incredibly useful features: the spread (...) and rest (...) operators. At first glance, they look identical—but they serve very different purposes.
If you’ve ever been confused about when to use each one, this guide will clear things up with simple explanations and practical examples.
What is the Spread Operator?
The spread operator (...) is used to expand elements from an iterable (like an array or object) into individual elements.
Think of it as: “spreading things out”
Example with Arrays :
const numbers = [1, 2, 3];
const newNumbers = [...numbers, 4, 5];
console.log(newNumbers);
// [1, 2, 3, 4, 5]
Here, the spread operator takes each element from numbers and expands it into the new array.
Example with Objects :
const user = { name: "Rahul", age: 22 };
const updatedUser = { ...user, city: "Jodhpur" };
console.log(updatedUser);
// { name: "Rahul", age: 22, city: "Jodhpur" }
What is the Rest Operator?
The rest operator (...) does the opposite. It collects multiple elements and packs them into a single structure (usually an array).
Think of it as: “gathering things together”
Example in Function Parameters :
function sum(...numbers) {
return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3, 4));
// 10
Here, all arguments are collected into the numbers array.
Example with Destructuring :
const [first, ...rest] = [10, 20, 30, 40];
console.log(first); // 10
console.log(rest); // [20, 30, 40]
Spread vs Rest: Key Differences
| Feature |
Spread Operator |
Rest Operator |
| Purpose |
Expands elements |
Collects elements |
| Direction |
One → Many |
Many → One |
| Usage Context |
Arrays, Objects, Function calls |
Function params, Destructuring |
| Behavior |
Breaks apart |
Packs together |
Expanding vs Collecting (Core Idea)
Spread = Expanding values
const arr = [1, 2, 3];
console.log(...arr); // 1 2 3
Rest = Collecting values
function demo(...args) {
console.log(args);
}
demo(1, 2, 3); // [1, 2, 3]
Using Spread with Arrays and Objects
1. Copying Arrays (Shallow Copy)
const original = [1, 2, 3];
const copy = [...original];
2. Merging Arrays
const a = [1, 2];
const b = [3, 4];
const merged = [...a, ...b];
3. Copying Objects
const obj1 = { a: 1 };
const obj2 = { ...obj1 };
4. Merging Objects
const objA = { name: "Rahul" };
const objB = { age: 22 };
const combined = { ...objA, ...objB };
Practical Use Cases
1. Cloning State (React Example)
const newState = { ...oldState, isLoggedIn: true };
2. Updating Arrays Without Mutation
const items = ["apple", "banana"];
const newItems = [...items, "orange"];
3. Flexible Function Arguments
function logAll(...args) {
args.forEach(arg => console.log(arg));
}
4. Removing Elements Using Destructuring
const [remove, ...remaining] = [1, 2, 3];
Visualizing the Concept
Spread (Expanding)
[1, 2, 3] → 1, 2, 3
Rest (Collecting)
1, 2, 3 → [1, 2, 3]
Common Mistakes
Using rest outside valid positions (e.g., not at the end of parameters)
Confusing spread with deep copy (it’s only a shallow copy)
Overwriting properties unintentionally in object spread
Conclusion
Even though they share the same syntax (...), the spread and rest operators serve opposite roles:
Spread → expands values
Rest → collects values
Mastering these operators will make your JavaScript code cleaner, more flexible, and easier to maintain—especially in modern frameworks like React.
I write articles on blog.prakashtsx.com and also post development-related content on:
