Let’s go step-by-step through the Spread (...) and Rest (...) operators in modern JavaScript. 👇
🧠 What They Are
Both use the same ... syntax — but their behavior depends on where you use them:
| Operator | Action | Context |
|---|---|---|
Spread (...) | Expands elements | Used when passing, copying, or merging |
Rest (...) | Collects elements | Used when receiving or destructuring |
🔹 1. The Spread Operator
📖 Definition
Spread expands an array, object, or iterable into individual elements.
🧩 Example 1 — Expanding Arrays
const arr = [1, 2, 3];
console.log(...arr); // 1 2 3
Spread literally unpacks the array into individual items.
🧩 Example 2 — Copying Arrays
const numbers = [10, 20, 30];
const copy = [...numbers]; // shallow copy
copy.push(40);
console.log(numbers); // [10, 20, 30]
console.log(copy); // [10, 20, 30, 40]
✅ No reference sharing — numbers remains unchanged.
🧩 Example 3 — Combining Arrays
const fruits = ['🍎', '🍌'];
const moreFruits = ['🍓', '🍍'];
const all = [...fruits, ...moreFruits];
console.log(all); // ["🍎", "🍌", "🍓", "🍍"]
🧩 Example 4 — Spreading Into Function Arguments
const nums = [5, 10, 15];
console.log(Math.max(...nums)); // 15
✅ Spread lets you pass array elements as separate arguments.
🧩 Example 5 — Spreading Objects
const user = { name: "Alice", age: 25 };
const updated = { ...user, city: "Paris" };
console.log(updated);
// { name: "Alice", age: 25, city: "Paris" }
✅ Great for immutably updating or merging objects.
🔸 2. The Rest Operator
📖 Definition
Rest collects multiple elements into a single array or object.
It’s the reverse of spread — instead of expanding, it gathers.
🧩 Example 1 — Function Parameters
function sum(...nums) {
return nums.reduce((a, b) => a + b, 0);
}
console.log(sum(1, 2, 3, 4)); // 10
✅ Collects all arguments into an array named nums.
🧩 Example 2 — Combining Fixed + Rest Parameters
function greet(greeting, ...names) {
console.log(`${greeting}, ${names.join(" and ")}!`);
}
greet("Hello", "Alice", "Bob", "Charlie");
// Hello, Alice and Bob and Charlie!
🧩 Example 3 — Array Destructuring
const [first, ...others] = [10, 20, 30, 40];
console.log(first); // 10
console.log(others); // [20, 30, 40]
🧩 Example 4 — Object Destructuring
const person = { name: "John", age: 30, city: "London" };
const { name, ...info } = person;
console.log(name); // John
console.log(info); // { age: 30, city: "London" }
🔁 3. Spread vs Rest at a Glance
| Feature | Spread | Rest |
|---|---|---|
| Purpose | Expands elements | Collects elements |
| Direction | Breaks apart | Gathers together |
| Used in | Arrays, objects, function calls | Function params, destructuring |
| Example | [...arr1, ...arr2] | function fn(...args) |
| Think of it as | “Explode” | “Pack” |
⚡ 4. Using Both Together
function display(first, ...rest) {
console.log("First:", first);
console.log("Rest:", rest);
}
const arr = ["JS", "HTML", "CSS"];
display(...arr);
// Output:
// First: JS
// Rest: ["HTML", "CSS"]
✅ Spread: expands array when calling the function
✅ Rest: collects arguments inside the function
🚫 5. Common Mistakes
❌ Rest must come last in parameters:
function invalid(...a, b) {} // SyntaxError ❌
❌ Spread makes shallow copies, not deep ones:
const nested = [[1], [2]];
const copy = [...nested];
copy[0].push(99);
console.log(nested); // [[1, 99], [2]] 😬
🧩 6. Real-World Uses
✅ Combine arrays:
const allUsers = [...frontendUsers, ...backendUsers];
✅ Merge objects:
const fullProfile = { ...user, ...preferences };
✅ Flexible functions:
function logAll(...msgs) {
console.log(msgs.join(" | "));
}
✅ Partial destructuring:
const [head, ...tail] = queue;
🧭 Quick Summary
| Concept | Spread | Rest |
|---|---|---|
| Definition | Expands iterables | Collects values |
| Example | [...arr] | function fn(...args) |
| Used in | Function calls, arrays, objects | Parameters, destructuring |
| Returns | Individual elements | An array or object |