If you’ve ever seen ... in JavaScript and wondered what it does—you’re not alone.
The same syntax is used for two different purposes:
- Spread operator → expands values
- Rest operator → collects values
Understanding this difference is crucial for writing clean and modern JavaScript.
🧠 What Is the Spread Operator?
The spread operator (...) is used to expand elements from arrays or objects.
Think: “Open the box and take everything out”
📦 Spread with Arrays
```js id="spread1"
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];
console.log(arr2);
// [1, 2, 3, 4, 5]
👉 It spreads elements individually.
---
### 📊 Visualization
```id="viz1"
[1, 2, 3]
↓
...arr
↓
1, 2, 3
📦 Copying Arrays
```js id="spread2"
const original = [1, 2, 3];
const copy = [...original];
✔ Creates a shallow copy
✔ Avoids mutation
---
### 📦 Spread with Objects
```js id="spread3"
const user = { name: "Rahul", age: 22 };
const updatedUser = {
...user,
city: "Delhi"
};
🧠 What Is the Rest Operator?
The rest operator (...) is used to collect multiple values into one.
Think: “Gather everything into a box”
📥 Rest in Function Parameters
```js id="rest1"
function sum(...numbers) {
return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3, 4)); // 10
👉 All arguments are collected into an array
---
### 📊 Visualization
```id="viz2"
1, 2, 3, 4
↓
...numbers
↓
[1, 2, 3, 4]
📥 Rest in Destructuring
```js id="rest2"
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 values | Collects values |
| Usage position | Right side | Left side |
| Output | Individual elements | Array |
---
## 🛠️ Practical Use Cases
---
### 1. Merging Arrays
```js id="use1"
const a = [1, 2];
const b = [3, 4];
const merged = [...a, ...b];
2. Function Arguments
```js id="use2"
const nums = [1, 2, 3];
function multiply(a, b, c) {
return a * b * c;
}
multiply(...nums);
---
### 3. Removing Properties from Object
```js id="use3"
const user = { name: "Rahul", age: 22, city: "Delhi" };
const { city, ...rest } = user;
console.log(rest);
// { name: "Rahul", age: 22 }
4. Updating State (Real-world pattern)
```js id="use4"
const state = { count: 0 };
const newState = { ...state, count: state.count + 1 };
---
## 🧩 Conceptual Understanding
* **Spread → breaks things apart**
* **Rest → puts things together**
---
## 🎯 Common Interview Insight
Interviewers often test:
* Can you merge arrays?
* Can you handle variable arguments?
* Do you understand destructuring with rest?
---
## 🚀 Final Thoughts
The `...` operator is small but powerful.
Mastering **spread vs rest** helps you:
* Write cleaner code
* Handle data efficiently
* Solve interview problems confidently
---
## 🧠 Quick Summary
* Spread → expands values
* Rest → collects values
* Same syntax, different behavior based on context
---
Top comments (0)