Spread vs Operators in JavaScript

In the previous blog, we learned about destructuring and how it helps extract values cleanly from arrays and objects.

Now we move into something that looks very similar but behaves differently depending on how you use it. The spread and rest operators.

At first glance, both use the same syntax:

...

But they do completely different things.

Understanding this properly is important because this is used everywhere in modern JavaScript:

• React code

• API handling

• array manipulation

• function arguments

And if you don’t understand the difference, it can get confusing very quickly.

---

The Core Idea

The same ... operator behaves differently based on context.

• Spread → expands values

• Rest → collects values

That is the simplest way to remember it.

---

Spread Operator (Expanding Values)

Spread is used when you want to expand elements.

Spread with Arrays

const arr = [1, 2, 3];

const newArr = [...arr];

console.log(newArr); // [1, 2, 3]

This creates a copy.

Combining Arrays

const arr1 = [1, 2];
const arr2 = [3, 4];

const combined = [...arr1, ...arr2];

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

Adding Elements

const arr = [2, 3];

const newArr = [1, ...arr, 4];

---

Spread with Objects

const user = {
  name: "Shikhar",
  age: 25
};

const newUser = { ...user };

Updating Objects

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

Merging Objects

const obj1 = { a: 1 };
const obj2 = { b: 2 };

const merged = { ...obj1, ...obj2 };

---

Important Concept: Shallow Copy

Spread creates a shallow copy.

const user = {
  name: "Shikhar",
  address: { city: "Delhi" }
};

const copy = { ...user };

copy.address.city = "Mumbai";

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

Nested objects are still shared.

---

Rest Operator (Collecting Values)

Rest is used to collect multiple values into one.

Rest in Arrays

const arr = [1, 2, 3, 4];

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

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

Rest in Objects

const user = {
  name: "Shikhar",
  age: 25,
  city: "Delhi"
};

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

console.log(name);
console.log(rest);

---

Rest in Function Parameters

This is very powerful.

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

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

Here, all arguments are collected into an array.

---

Spread vs Rest (Key Difference)

Feature	Spread	Rest
Purpose	Expands values	Collects values
Use case	Copy, merge	Gather remaining
Position	Anywhere	Last element only

---

Important Rule

Rest must be the last element.

const [a, ...rest, b] = arr; // Error

---

Real-World Example

const users = [
  { name: "Shikhar", age: 25 },
  { name: "Rahul", age: 30 }
];

const updatedUsers = users.map(user => ({
  ...user,
  isActive: true
}));

---

Combining Everything

function processUsers(...users) {
  return users.map(({ name, ...rest }) => ({
    name,
    ...rest,
    active: true
  }));
}

---

Common Mistakes

1. Confusing spread and rest

Same syntax, different meaning.

2. Forgetting shallow copy

Leads to unexpected bugs.

3. Using rest incorrectly in arrays

Must always be last.

---

Why This Topic is Important

• Used in modern frameworks

• Makes code flexible

• Reduces boilerplate

• Essential for clean code

---

Final Thought

Spread and rest operators look simple, but they are extremely powerful.

They allow you to write flexible, reusable, and clean code.

Once you start using them properly, your JavaScript code starts looking modern and professional.