Spread vs Rest Operators in JavaScript – Complete Guide with Examples

JavaScript ES6 introduced two powerful features that often confuse beginners: the Spread (...) and Rest (...) operators.

They look exactly the same—but behave very differently depending on where and how you use them.

In this blog, you’ll learn everything you need:

• What spread operator does

• What rest operator does

• Key differences

• Real-world use cases

• Easy examples to understand deeply

---

🔹 What is the Spread Operator?

The spread operator (...) expands elements of an array, object, or iterable into individual elements.

👉 Think of it as: "Unpacking" or "Expanding" values

✅ Example with Arrays

const arr = [1, 2, 3];

const newArr = [...arr, 4, 5];

console.log(newArr); 
// [1, 2, 3, 4, 5]

👉 Here, ...arr expands the array into individual elements.

---

✅ Example with Objects

const user = {
  name: "Virat",
  age: 30
};

const updatedUser = {
  ...user,
  city: "Delhi"
};

console.log(updatedUser);

👉 Output:

{
  name: "Vishal",
  age: 30,
  city: "Delhi"
}

---

📌 Key Uses of Spread Operator

✔ Copy arrays/objects ✔ Merge arrays/objects ✔ Pass multiple arguments to functions

---

✅ Function Example

const numbers = [10, 20, 30];

function sum(a, b, c) {
  return a + b + c;
}

console.log(sum(...numbers)); // 60

---

🔹 What is the Rest Operator?

The rest operator (...) collects multiple elements into a single array.

👉 Think of it as: "Packing" or "Collecting" values

---

✅ Example in Function Parameters

function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3, 4)); // 10

👉 Here, ...numbers collects all arguments into an array.

---

✅ Example with Array Destructuring

const arr = [1, 2, 3, 4];

const [first, ...rest] = arr;

console.log(first); // 1
console.log(rest);  // [2, 3, 4]

---

📌 Key Uses of Rest Operator

✔ Handle variable number of arguments ✔ Collect remaining elements ✔ Simplify function parameters

---

🔥 Spread vs Rest: Key Difference

Feature	Spread Operator	Rest Operator
Purpose	Expands values	Collects values
Direction	Inside → Outside	Outside → Inside
Use Case	Copy, merge, pass values	Gather remaining values
Example	[...arr]	function(...args)

---

🧠 Core Concept (Most Important)

👉 Spread = Expand values 👉 Rest = Collect values

---

🎯 Real-World Use Cases

1️⃣ Copying Arrays (Avoid Mutation)

const original = [1, 2, 3];
const copy = [...original];

copy.push(4);

console.log(original); // [1, 2, 3]
console.log(copy);     // [1, 2, 3, 4]

---

2️⃣ Merging Arrays

const a = [1, 2];
const b = [3, 4];

const merged = [...a, ...b];

console.log(merged); // [1, 2, 3, 4]

---

3️⃣ Updating Objects (React Style)

const state = {
  name: "Virat",
  age: 30
};

const newState = {
  ...state,
  age: 21
};

👉 Used heavily in React for immutability.

---

4️⃣ Flexible Function Arguments

function multiply(multiplier, ...nums) {
  return nums.map(num => num * multiplier);
}

console.log(multiply(2, 1, 2, 3));
// [2, 4, 6]

---

5️⃣ Removing Elements Using Destructuring

const numbers = [10, 20, 30, 40];

const [removed, ...remaining] = numbers;

console.log(remaining); // [20, 30, 40]

---

📊 Visual Understanding

🔹 Spread (Expanding)

[1, 2, 3]
   ↓
...arr
   ↓
1, 2, 3

---

🔹 Rest (Collecting)

1, 2, 3, 4
   ↓
...nums
   ↓
[1, 2, 3, 4]

---

⚠️ Common Mistakes

❌ Using rest in the wrong position

// ❌ Wrong
const [...rest, last] = [1, 2, 3];

✔ Rest must always be last:

const [first, ...rest] = [1, 2, 3];

---

🧩 When to Use What?

Use Spread (...) when:

• You want to expand values

• You need to copy or merge data

Use Rest (...) when:

• You want to collect values

• You handle unknown number of arguments

---

🏁 Conclusion

Even though spread and rest operators look identical, their roles are completely opposite:

• Spread → Expands values

• Rest → Collects values

Mastering these will make your JavaScript code: ✔ Cleaner ✔ Shorter ✔ More powerful

---