# Spread vs Rest Operators in JavaScript

In this javascript topic today we are going to discuss about spread and rest operator, althougth both are absolute opposite but its look same to each other and begineer do't understand the meaning of both, don't worry trust me after reading this blog you get the meaning of both operator. so before moving towards there two operator i want to discuss two terminology because around there two term entire blog is revolve around.

### Expanding Vs Collecting value

Expanding mean in general term we spread one bigger thing into chunks like we have one box with some items and we spread those items.

Collecting values that means we have chunks of items and we collect those items into single box.

Now if you understand meaning of these two terms you already understand both operator, yeah its really.

* * *

## Spread operator

Spread operator is valid operator of javascript denoted as three dot `...name` introduced in ES6. and it is used to expand the items of array, object and string. or in fancy term we can say used to unpack iterable like array, string, object.

### Example

```javascript
// spread operator with array
const arr1 = [10, 20, 30]
const arr2 = [...arr1]
const arr3 = [1, 5, ...arr1, 40, 50] 

console.log(arr2) // [10, 20, 30]
console.log(arr3) // [1, 5, 10, 20, 30, 40, 50]

// spread operator with object 
const student = { name : "Amit", course : "B-Tech"};

const participant = { ...student, game : "Hackathon"}

console.log(participant.name) // "Amit"
console.log(participant.course) // "B-Tech"
console.log(participant.game) // "Hackathon"
```

* * *

## Use case of Spread operator

*   **Clone array**
    

```javascript
const fruits = ["apple", "mango", "orange"]

// clone arr
const newfriuts = [...fruits]
console.log(newfruits) // ["apple", "mango", "orange"]
```

*   **Merge array**
    

```javascript
const arr1 = [10, 20, 30]
const arr2 = [40, 50, 60]

// new array
const arr = [...arr1, ...arr2] // [10, 20, 30, 40, 50, 60]
```

*   **Combining Object**
    

```javascript
const object1 = {a : "pen", b: "pencil"}
const object2 = {c : "notebook", d : "book}

const newobject = {...object1, ...object2}
```

* * *

## Rest operator

Rest is also valid operator like spread with same syntax and notation .

Rest operator is used to collect items into single array, its widely used in function paramter to take all indivisual items into single array . also called as rest parameter.

### Example

```javascript
function fun(...a){
 console.log(a)
}

fun(1,2,3,4); // [1,2,3,4];
```

* * *

## Use case of rest operator

*   **Array Destructuring -** we can take starting some values from array and keep rest as it is.
    

```javascript
const arr = [1,2,3,4,5,6]
const [first, second, third, ...rest] = arr;

console.log(first) // 1
console.log(second) // 2
console.log(third) // 3
console.log(rest) // [4,5,6]
```

*   **Object Destructuring -**
    

```javascript
const obj = { name : "Amit", age : 21, contact : "999-444-544", country : "India"}

const {name, age, ...details] = obj;

console.log(name) // "Amit"
console.log(age) // 21
```

*   **Handling Variable Function Arguments**
    

```javascript
function fun1(...args){
 }

fun1(1, "Hello", {obj}, []);
```

* * *

## Difference between sepread and rest operator

| Feature | Spread Operator (`...`) | Rest Operator (`...`) |
| --- | --- | --- |
| **Purpose** | Expands elements | Collects elements |
| **Direction** | Array → individual values | Values → array |
| **Usage** | Function calls, arrays, objects | Function parameters, destructuring |
| **Function Role** | Pass arguments | Receive arguments |
| **Position Rule** | Can appear anywhere | Must be last parameter |
| **Result** | Individual values | Array (or object in destructuring) |

* * *

## Conclusion

The spread and rest operators share the same `...` syntax but do opposite jobs: spread expands (unpacks) values, while rest collects (packs) them. Use spread when you want to expand an iterable or object into individual elements (e.g., cloning/merging arrays or objects, spreading arguments into a function). Use rest when you want to gather remaining items into a single array or object (e.g., variadic function parameters or destructuring).

Key points to remember:

*   Spread expands iterables/objects: `const copy = [...arr]`, `fn(...args)`, `const merged = {...obj1, ...obj2}`.
    
*   Rest collects remaining items: `function fn(...args) {}`, `const [first, ...rest] = arr`, `const { a, ...rest } = obj`.
    
*   Context decides behavior: `...` in an expression list or literal is spread; `...` in a parameter list or destructuring target is rest.
    
*   Rules and caveats: rest must be the last element in parameter lists/destructuring; object spread creates shallow copies; spread works only on iterables (except object spread, which handles object properties).
    
*   Best practices: prefer spread for immutable updates (clone/merge without mutation), use rest for flexible argument handling or to capture leftover properties, and be mindful that deep cloning requires additional steps.
    

Once you get comfortable with when `...` is unpacking versus when it’s packing, you'll find both operators make common tasks much simpler and your code more expressive.