# Spread vs Rest Operators in JavaScript: Complete Guide with Examples & Use Cases

Ever looked at ... in JavaScript and thought, *“Wait… is this spreading things out or collecting them?”* 🤔

You’re not alone. The same three dots power both the **spread** and **rest** operators—two concepts that look identical but behave completely differently depending on where you use them.

In this blog, we’ll break down how the **rest operator works with destructuring**, why it’s so useful in real-world code, and how you can use it to write cleaner, more flexible JavaScript.

* * *

## **What spread operator does**

As the name suggests, it expands (spreads out) the elements of an iterable like array, string, objects etc.

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

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


// Example with objects
const user = { name: "Mehtab", age: 21 };
const updatedUser = { ...user, city: "Guwahati" };

console.log(updatedUser);
// { name: "Mehtab", age: 21, city: "Guwahati" }


// Example with functions
function sum(a, b, c) {
  return a + b + c;
}

const nums = [1, 2, 3];
console.log(sum(...nums)); // 6
```

* * *

## **What rest operator does**

Rest operator does exactly the opposite things, it collects multiple elements into a single array.

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

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


// Example with array destructuring
const [first, ...rest] = [10, 20, 30, 40];

console.log(first); // 10
console.log(rest);  // [20, 30, 40]


// Example with objects
const user = { name: "Mehtab", age: 21, city: "Guwahati" };
const { name, ...rest } = user;

console.log(name); // "Mehtab"
console.log(rest); // { age: 21, city: "Guwahati" }
```

* * *

### **Spread V/s Rest Operators**

![](https://cdn.hashnode.com/uploads/covers/69078637d192b5f0327809a3/e5d84135-a142-445e-a17d-8eb584ee5dd5.png align="center")

Talking about differences between spread & rest operators .The purpose of spread is to expand and rest is to gather . We can use spread to merge, copy and pass values , on the other hand rest can be used in destructuring , function params.

Think of spread like you are opening up a box and rest as you are putting everything into one box.

```javascript
// Practical use cases  
// You can access particular value or remove specific properties from an object
const user = {
  name: "Mehtab",
  email: "mehtab@mail.com",
  password: "secret123"
};

const { password, ...safeUser } = user;

console.log(safeUser);
// { name: "Mehtab", email: "mehtab@mail.com" }
```

Handling flexible function arguments. When you want to take params as array or you don’t know how many arguments will be passed.

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

sum(1, 2, 3, 4); // 10

// Separating required vs optional data
function createUser({ name, email, ...optional }) {
  console.log(name, email);
  console.log(optional);
}

createUser({
  name: "Mehtab",
  email: "mehtab@mail.com",
  age: 21,
  city: "Guwahati"
});
```

![](https://cdn.hashnode.com/uploads/covers/69078637d192b5f0327809a3/a9567736-30d1-426b-b64c-e86e3fc108d5.png align="center")

At its core, the rest operator in destructuring is all about simplicity—*take what you need, and neatly bundle the rest.*

Whether you're filtering out sensitive data, handling dynamic inputs, or managing state without mutation, this small syntax unlocks a surprisingly powerful pattern.

* * *

Once you start using it, you’ll notice your code becoming cleaner, more readable, and easier to scale. And that’s the real goal—not just writing code that works, but writing code that’s easy to understand and maintain.