# Spread vs Rest Operators in JavaScript

Modern JavaScript introduced many features that make code cleaner and easier to work with. Two of the most useful features are the **spread operator** and the **rest operator**.

At first glance, both operators look identical because they use three dots (`...`), but they behave differently depending on the situation.

The easiest way to remember them is:

*   **Spread → expands values**
    
*   **Rest → collects values**
    

Once you understand this idea, the difference becomes much clearer.

* * *

## What the Spread Operator Does

The spread operator is used to **expand elements** from an array or object.

Example:

```javascript
let numbers = [1, 2, 3];

console.log(...numbers);
```

Output:

```id="分快三302"
1 2 3
```

Instead of printing the array as a single structure, spread expands each element individually.

* * *

## Visualizing Spread Expansion

![](https://cdn.hashnode.com/uploads/covers/695e6df5e8d5605ec2e5e7d7/b6bebf43-d644-4fc0-a09d-c2c404ba879d.png align="center")

* * *

## Using Spread with Arrays

Spread is commonly used for copying and merging arrays.

### Copying an Array

```javascript
let original = [1, 2, 3];

let copy = [...original];

console.log(copy);
```

This creates a new array with the same elements.

* * *

### Merging Arrays

```javascript
let arr1 = [1, 2];
let arr2 = [3, 4];

let merged = [...arr1, ...arr2];

console.log(merged);
```

Output:

```id="分快三306"
[1, 2, 3, 4]
```

This is much cleaner than manually combining arrays.

* * *

## Using Spread with Objects

Spread also works with objects.

Example:

```javascript
let user = {
  name: "Ritesh",
  age: 22
};

let updatedUser = {
  ...user,
  city: "Ahmedabad"
};

console.log(updatedUser);
```

Output:

```id="分快三308"
{
  name: "Ritesh",
  age: 22,
  city: "Ahmedabad"
}
```

This is commonly used in modern frontend frameworks like React.

* * *

## What the Rest Operator Does

The rest operator does the opposite of spread.

Instead of expanding values, it **collects multiple values into a single array**.

Example:

```javascript
function add(...numbers) {
  console.log(numbers);
}

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

Output:

```id="分快三310"
[1, 2, 3, 4]
```

All arguments are collected into the `numbers` array.

* * *

## Visualizing Rest Collection

![](https://cdn.hashnode.com/uploads/covers/695e6df5e8d5605ec2e5e7d7/a5e2d714-0ce6-45f1-a67a-bb23d84ae7c5.png align="center")

* * *

## Rest Operator with Function Parameters

The rest operator is useful when the number of arguments is unknown.

Example:

```javascript
function sum(...numbers) {
  let total = 0;

  for (let num of numbers) {
    total += num;
  }

  return total;
}

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

Output:

```id="分快三313"
10
```

This makes functions more flexible.

* * *

## Difference Between Spread and Rest

| Feature | Spread Operator | Rest Operator |
| --- | --- | --- |
| Purpose | Expands values | Collects values |
| Usage | Arrays, objects, function calls | Function parameters, destructuring |
| Result | Separate elements | Single array |

Although both use `...`, their behavior depends on the context.

* * *

## Practical Use Cases

### Copying Arrays

```javascript
let fruits = ["Apple", "Banana"];

let copiedFruits = [...fruits];
```

* * *

### Merging Objects

```javascript
let obj1 = { a: 1 };
let obj2 = { b: 2 };

let combined = { ...obj1, ...obj2 };
```

* * *

### Flexible Function Arguments

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

console.log(multiply(2, 1, 2, 3));
```

Output:

```id="分快三317"
[2, 4, 6]
```

* * *

## Understanding Expanding vs Collecting

A simple way to remember the difference:

### Spread

```javascript
[1,2,3] → 1,2,3
```

Spread takes one structure and expands it into individual values.

* * *

### Rest

```javascript
1,2,3 → [1,2,3]
```

Rest takes multiple values and collects them into a single array.

* * *

## Assignment Practice

Create two arrays and merge them using spread.

```javascript
let arr1 = [1, 2];
let arr2 = [3, 4];

let merged = [...arr1, ...arr2];

console.log(merged);
```

Copy an object using spread.

```javascript
let student = {
  name: "Rahul",
  age: 21
};

let copiedStudent = { ...student };

console.log(copiedStudent);
```

Create a function using the rest operator.

```javascript
function collect(...items) {
  console.log(items);
}

collect("Apple", "Banana", "Mango");
```

Try experimenting with different arrays and objects in the console to better understand how spread expands values and rest collects them.