Spread vs Rest Operators in JavaScript

JavaScript has evolved a lot over the years, and with ES6 came two incredibly useful features: the spread (...) and rest (...) operators. At first glance, they look identical—but they serve very different purposes.

If you’ve ever been confused about when to use each one, this guide will clear things up with simple explanations and practical examples.

What is the Spread Operator?

The spread operator (...) is used to expand elements from an iterable (like an array or object) into individual elements.

Think of it as: “spreading things out”

Example with Arrays :

const numbers = [1, 2, 3];
const newNumbers = [...numbers, 4, 5];

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

Here, the spread operator takes each element from numbers and expands it into the new array.

Example with Objects :

const user = { name: "Rahul", age: 22 };
const updatedUser = { ...user, city: "Jodhpur" };

console.log(updatedUser);
// { name: "Rahul", age: 22, city: "Jodhpur" }

What is the Rest Operator?

The rest operator (...) does the opposite. It collects multiple elements and packs them into a single structure (usually an array).

Think of it as: “gathering things together”

Example in Function Parameters :

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

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

Here, all arguments are collected into the numbers array.

Example with Destructuring :

const [first, ...rest] = [10, 20, 30, 40];

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

Spread vs Rest: Key Differences

Feature	Spread Operator	Rest Operator
Purpose	Expands elements	Collects elements
Direction	One → Many	Many → One
Usage Context	Arrays, Objects, Function calls	Function params, Destructuring
Behavior	Breaks apart	Packs together

Expanding vs Collecting (Core Idea)

• Spread = Expanding values

  const arr = [1, 2, 3];
  console.log(...arr); // 1 2 3
  

• Rest = Collecting values

  function demo(...args) {
    console.log(args);
  }
  demo(1, 2, 3); // [1, 2, 3]
  

Using Spread with Arrays and Objects

1. Copying Arrays (Shallow Copy)

const original = [1, 2, 3];
const copy = [...original];

2. Merging Arrays

const a = [1, 2];
const b = [3, 4];
const merged = [...a, ...b];

3. Copying Objects

const obj1 = { a: 1 };
const obj2 = { ...obj1 };

4. Merging Objects

const objA = { name: "Rahul" };
const objB = { age: 22 };

const combined = { ...objA, ...objB };

Practical Use Cases

1. Cloning State (React Example)

const newState = { ...oldState, isLoggedIn: true };

2. Updating Arrays Without Mutation

const items = ["apple", "banana"];
const newItems = [...items, "orange"];

3. Flexible Function Arguments

function logAll(...args) {
  args.forEach(arg => console.log(arg));
}

4. Removing Elements Using Destructuring

const [remove, ...remaining] = [1, 2, 3];

Visualizing the Concept

Spread (Expanding)

[1, 2, 3]  →  1, 2, 3

Rest (Collecting)

1, 2, 3  →  [1, 2, 3]

Common Mistakes

• Using rest outside valid positions (e.g., not at the end of parameters)

• Confusing spread with deep copy (it’s only a shallow copy)

• Overwriting properties unintentionally in object spread

Conclusion

Even though they share the same syntax (...), the spread and rest operators serve opposite roles:

• Spread → expands values

• Rest → collects values

Mastering these operators will make your JavaScript code cleaner, more flexible, and easier to maintain—especially in modern frameworks like React.

---

I write articles on blog.prakashtsx.com and also post development-related content on:

• Twitter / X

• LinkedIn