# Spread vs Rest Operators in JavaScript

At first glance, both spread and rest use:

```javascript
...
```

But they behave very differently depending on the context.

**The Core Idea:**

```plaintext
Spread → Expands values 📤
Rest   → Collects values 📥
```

## What is the Spread Operator?

The spread operator (`...`) is used to expand elements.

**Example With Arrays:**

```javascript
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];

console.log(arr2);
```

**Visual:**

```plaintext
[1, 2, 3]
   ↓ (spread)
1, 2, 3
```

### Spread With Objects

```javascript
const user = { name: "Viraj", age: 24 };

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

**Visual:**

```plaintext
{ name, age }
   ↓
{ name, age, city }
```

## What is the Rest Operator?

The rest operator (`...`) is used to collect multiple values into one.

### Example With Functions:

```javascript
function sum(...numbers) {
  return numbers.reduce((acc, curr) => acc + curr, 0);
}

sum(1, 2, 3, 4);
```

**Visual:**

```plaintext
1, 2, 3, 4
   ↓ (rest)
[1, 2, 3, 4]
```

### Rest Destructuring

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

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

## Spread vs Rest (Key Differences)

```plaintext
Feature        | Spread             | Rest 
---------------|--------------------|-------------------
Purpose        | Expand values      | Collect values
Usage          | Arrays, Objects    | Function params, destructuring
Direction      | Inside → Outside  | Outside → Inside
```

### Think Like This:

*   Spread = Unpack Things
    
*   Rest = Pack Things
    

## Practical Use Cases

### 1\. Copying Arrays

```javascript
const arr = [1, 2, 3];
const copy = [...arr];
```

### 2\. Merging Arrays

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

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

### 3\. Updating Objects (Immutable Way)

```javascript
const user = { name: "Viraj", age: 24 };

const updated = { ...user, age: 25 };
```

### 4\. Handling Multiple Arguments

```javascript
function logAll(...args) {
  console.log(args);
}
```

### 5\. Removing Properties From Objects

```javascript
const user = { name: "Viraj", age: 24, city: "Pune" };

const { city, ...rest } = user;

console.log(rest);
```

## Real World Pattern

### React Prop Example:

```javascript
function Button({ title, ...props }) {
  return <button {...props}>{title}</button>;
}
```

Very common in modern JavaScript frameworks.

## Common Mistakes

### Using Rest in Wrong Position

```javascript
function test(...args, last) {} // ❌ Error
```

Rest must be last parameter

### Confusing Spread with Rest

```plaintext
Same syntax ≠ Same behavior
```

**Visual Summary**

```plaintext
Spread → Break apart values
Rest   → Gather values together
```

### Key Takeways:

*   Same Syntax different meaning
    
*   Spread = expand , Rest = Collect
    
*   Widely used in modern JS
    
*   Important for interviews + real world apps