Spread vs Rest Operators in JavaScript

In modern JavaScript ES6 and beyond, the spread ... and rest ... operators are powerful features that make code cleaner, shorter, and easier to understand.

Although both use the same syntax, they behave differently depending on how they are used. This guide will help you clearly understand their purpose, differences, and real-world usage.

Core Concept

• Spread operator expands values

• Rest operator collects values

Simple way to remember:

• Spread → Takes values out

• Rest → Puts values in

What is the Spread Operator?

The spread operator ... is used to expand elements of an iterable like arrays, objects, or strings.

Basic Example

const arr = [1, 2, 3];

console.log(...arr);
// Output: 1 2 3

Spread Operator Use Cases

1. Copying an Array

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

copy.push(4);

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

2. Merging Arrays

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

const merged = [...a, ...b];

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

3. Passing Array as Function Arguments

const numbers = [5, 10, 15];

console.log(Math.max(...numbers));
// 15

4. Working with Objects

const user = {
  name: "Nikhil",
  age: 21
};

const updatedUser = {
  ...user,
  city: "Mumbai"
};

console.log(updatedUser);

5. Real-World Example (State Update)

const user = {
  name: "Nikhil",
  skills: ["JavaScript"]
};

const updatedUser = {
  ...user,
  skills: [...user.skills, "React"]
};

console.log(updatedUser);

What is the Rest Operator?

The rest operator ... is used to collect multiple values into a single array.

Rest Operator Use Cases

1. Function with Unlimited Arguments

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

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

2. Array Destructuring

const numbers = [10, 20, 30, 40];

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

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

3. Object Destructuring (Removing Sensitive Data)

const user = {
  id: 1,
  name: "Nikhil",
  email: "nikhil@example.com",
  password: "secret"
};

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

console.log(safeData);
// { id: 1, name: "Nikhil", email: "nikhil@example.com" }

4. Combining Fixed and Dynamic Parameters

function greet(greeting, ...names) {
  names.forEach(name => {
    console.log(`\({greeting}, \){name}`);
  });
}

greet("Hello", "Nikhil", "Rahul", "Amit");

Spread vs Rest (Differences)

Feature	Spread Operator	Rest Operator
Purpose	Expands values	Collects values
Usage	Arrays, objects, function calls	Functions, destructuring
Direction	Inside => Outside	Outside => Inside

Common Mistakes

1. Confusing Spread and Rest

function test(...args) {} // Rest
const arr = [...args];   // Spread

2. Assuming Deep Copy

const original = [{ a: 1 }];
const copy = [...original];

copy[0].a = 99;

console.log(original[0].a); // 99

Spread creates a shallow copy.

3. Wrong Position of Rest Parameter

// Incorrect
function test(...args, last) {}

// Correct
function test(first, ...args) {}

Real-Life Analogy

• Spread operator is like unpacking items from a bag

• Rest operator is like collecting items into a bag

Interview Questions

• What is the difference between spread and rest operator?

• Can we use spread with objects?

• Does spread create deep copy?

• Why must rest parameter be last?

• Where have you used spread in real projects?

---

Conclusion

Spread and rest operators are essential in modern JavaScript.

• Use spread to expand values

• Use rest to collect values

Mastering these will help you write cleaner and more maintainable code.