Spread vs Rest Operators in JavaScript

What the Spread Operator Does

The spread operator (...) is used to expand values.

In simple words: 👉 Spread = “values ko tod dena / expand kar dena”

Example with Array

let arr = [1, 2, 3];

console.log(...arr);

Output:

1 2 3

Array ke elements alag-alag ho gaye.

Combining Arrays

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

let result = [...a, ...b];

console.log(result);

Output:

[1, 2, 3, 4]

Copying Arrays

let arr = [1, 2, 3];

let copy = [...arr];

👉 New array ban gaya (no reference issue)

Spread with Objects

let user = { name: "Devesh" };

let updatedUser = {
  ...user,
  age: 21
};

console.log(updatedUser);

Output:

{ name: "Devesh", age: 21 }

What the Rest Operator Does

The rest operator (...) is used to collect values.

In simple words: 👉 Rest = “values ko ek jagah collect kar lena”

Example in Function

function sum(...numbers) {
  console.log(numbers);
}

sum(1, 2, 3, 4);

Output:

[1, 2, 3, 4]

Sab values ek array mein aa gayi.

Rest with Parameters

function add(a, b, ...rest) {
  console.log(a);    // 1
  console.log(b);    // 2
  console.log(rest); // [3, 4]
}

add(1, 2, 3, 4);

Key Difference

Feature	Spread	Rest
Work	Expands values	Collects values
Use	Arrays / Objects / Function calls	Function parameters
Direction	Breaks apart	Groups together

Easy Way to Remember

👉 Spread = expand 👉 Rest = collect

Practical Use Cases

1. Merging Arrays (Spread)

let cart1 = ["Milk", "Bread"];
let cart2 = ["Butter"];

let finalCart = [...cart1, ...cart2];

2. Passing Arguments (Spread)

function add(a, b, c) {
  return a + b + c;
}

let nums = [1, 2, 3];

console.log(add(...nums));

3. Dynamic Function Arguments (Rest)

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

console.log(total(100, 200, 300));

4. Updating Objects (Spread)

let user = { name: "Devesh", age: 21 };

let newUser = { ...user, age: 22 };

5. Destructuring with Rest

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

let [first, ...others] = arr;

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

Real-Life Analogy
Spread

Like opening a box and spreading items on a table

Rest

Like collecting all items into one box