Spread vs Rest Operators in JavaScript
🔮 What are three dots ... ?
In JavaScript, you'll see three little dots — and they're like magic! Depending on where you use them, they either spread things out or collect things together.
🍕 Pizza analogy: Imagine slicing a pizza. Spread is like taking all slices out of the box and laying them on the table. Rest is like scooping all the remaining slices back into one container after you've taken your favourites.
🌊 The Spread Operator — Expanding!
The spread operator takes something (like an array or object) and opens it up — like unzipping a bag and spilling all contents out.
🎈 Think of it like: A bag of balloons. Spread = letting all the balloons fly out one by one into the sky!
With Arrays: Combine two lunch boxes into one!
Spread with Arrays
const fruits = ['🍎', '🍌'];
const veggies = ['🥕', '🥦'];
const lunchbox = [...fruits, ...veggies];
// 👆 spread both into one!
console.log(lunchbox);
// ['🍎', '🍌', '🥕', '🥦']With Objects: Mix two backpacks into one super backpack!
Spread with Objects
const bag1 = { pencil: 2, eraser: 1 };
const bag2 = { ruler: 1, pen: 3 };
const superBag = { ...bag1, ...bag2 };
// { pencil: 2, eraser: 1, ruler: 1, pen: 3 }
In function calls: Pass array items as separate arguments!
Spread in Function Call
const nums = [3, 7, 1, 9];
// Without spread — won't work right:
Math.max(nums); // NaN 😢
// With spread — pours out items:
Math.max(...nums); // 9 🎉
🧲 The Rest Operator — Collecting!
The rest operator does the opposite. It grabs a bunch of values and packs them into one array. It says "give me the rest of it!"
🎒 Think of it like: A magic backpack at a birthday party. You say "I'll take the cake 🎂, and pack the REST into my bag!" — the rest operator collects everything else for you.
In functions: Grab as many arguments as you like!
Rest in Function Parameters
function addAll(...numbers) {
// 👆 ...numbers collects everything!
return numbers.reduce((a, b) => a + b, 0);
}
addAll(1, 2, 3); // 6
addAll(10, 20, 30, 40); // 100
In destructuring: Take the first ones, collect the rest!
Rest in Destructuring
const [first, second, ...others] = [1, 2, 3, 4, 5];
console.log(first); // 1
console.log(second); // 2
console.log(others); // [3, 4, 5] — the rest!
⚡ Spread vs Rest — The Big Difference
Same three dots, but opposite jobs!
Spread
Unpacks / expands values
Used in function calls
Used in array / object literals
Makes things bigger / combines them
🧲 Rest
Packs / collects values
Used in function definitions
Used in destructuring
Must always come last!
| Feature | Spread ... | Rest ... |
|---|---|---|
| What it does | Expands | Collects |
| Where used | Calls / literals | Definitions / destructuring |
| Position | Anywhere | Must be last |
| Result type | Individual values | Always an array |
🚀 Real-World Use Cases
Here's where you'll see these patterns every day in real code:
Common real-world patterns
// 1. Clone an array (no mutation!)
const copy = [...original];
// 2. Add default + override in config
const config = { ...defaults, ...userSettings };
// 3. Log any number of errors
function logErrors(...errors) {
errors.forEach(e => console.error(e));
}
// 4. Remove first item, keep rest
const [head, ...tail] = myList;
// 5. Merge arrays in one shot
const all = [...listA, ...listB, extraItem];
🧠 Quick Quiz — Spread or Rest?
- Math.max(...nums) — what's ... doing here?
Spread — expanding array items OR Rest — collecting arguments
2. function greet(name, ...others) — what's ... doing?
Spread — expanding values OR Rest — collecting extra args
3. const merged = {...obj1, ...obj2} — what's ... doing?
Spread — unpacking both objects OR Rest — collecting into one
🎯 Remember This!
🌊 Spread = unpack → use it when you want to take items OUT of an array/object and use them individually.
🧲 Rest = collect → use it when you want to scoop up multiple values INTO one array.
The secret? Look at the context. Is the ... in a function call or literal? That's spread. Is it in a function definition or destructuring? That's rest.
