# Spread vs Rest Operators in JavaScript

* * *

### Spread vs Rest Operators in JavaScript

**Same syntax, Different jobs.**

If you've worked with modern JavaScript, you have probably seen `...` (three dots) syntax everywhere.

At first if feels confusing. Sometimes it expands values, sometimes it collects them. That is because this same syntax is used for two different things.

*   Spread Operator --> expands values
    
*   Rest Operator --> collects values
    

Let's discuss it down in a simple way.

* * *

### What is Spread Operator?

The spread operator is used to expand elements. Think of it like opening a box and laying everything out.  
Example with Arrays

```javascript
const nums = [1, 2, 3];

const newNums = [...nums, 4, 5];

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

*   `...nums` spreads the array values
    
*   It becomes `1, 2, 3`
    

* * *

### What is the Rest Operator?

The rest operator is used to collect multiple values into one. Think of it like putting things into a box.

Example with Function Parameters

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

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

*   `...numbers` collects all arguments into an array
    
*   `numbers = [1, 2, 3, 4]`
    

* * *

Key Difference (Core idea)

| Spread | Rest |
| --- | --- |
| Expands values | Collects values |
| Used while sending data | Used while receiving data |
| Appears in function calls, arrays, objects | Appears in function parameters, destructuring |

**Simple way to remember:**

*   Spread = unpack
    
*   Rest = pack
    

* * *

Merge Arrays

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

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

//Result
[1, 2, 3, 4]
```

* * *

### Using Spread with Objects

**Copy an Object**

```javascript
const user = {name: "John", age: 25};

const newUser = {...user};
```

* * *

Update Object Values

```javascript
const user = {name: "John", age: 25};

const updatedUser = {
...user,
age: 26
};
```

here old values are copied then overridden.

* * *

### Using Rest in Destructuring

**Arrays**

```javascript
const name = [1, 2, 3, 4]

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

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

* * *

**Objects**

```javascript
const user = {
  name: "John",
  age: 25,
  city: "Delhi"
}

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

console.log(name); // John
conole.log(rest); // { age: 25, city: "Delhi" }
```

* * *

### Practical Use Cases

**1\. Avoid Mutating Data**

```javascript
const original = [1, 2, 3];
const updated = [...original, 4];
```

You keep the original safe.

### 2\. Flexible Functions

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

logAll(1, "hello", true);
```

Works with any number of inputs.

### 3\. Combine Data Easily

```javascript
const defaultSettings = { theme: "light" };
const userSettings = { fontSize: 16 };

const finalSettings = {
  ...defaultSettings,
  ...userSettings
};
```

* * *

### One Important Detail (Edge Case)

```javascript
const user = {
  name: "John",
  address: { city: "Delhi" }
};

const copy = { ...user };

copy.address.city = "Mumbai";

console.log(user.address.city);
// Mumbai 😬
```

Why?

Because nested objects are still shared by reference.

* * *

### Fixing the Shallow Copy Problem (Deep Copy in JavaScript)

**Using** `structuredClone()` **(Modern & Clean)**

```javascript
const user = {
  name: "John",
  address: { city: "Delhi" }
};

const deepCopy = structuredClone(user);

deepCopy.address.city = "Mumbai";

console.log(user.address.city);
// Delhi ✅
```

* * *