Introduction

Both spread and rest use the same syntax:

...

But they behave differently depending on usage.

What Is the Spread Operator?

Spread expands elements from arrays or objects.

Spread With Arrays

Example

const numbers = [1, 2, 3];

console.log(...numbers);

Output

1 2 3

Spread Expanding Elements

Copying Arrays

const original = [1, 2, 3];

const copy = [...original];

console.log(copy);

Merging Arrays

const array1 = [1, 2];
const array2 = [3, 4];

const merged = [...array1, ...array2];

console.log(merged);

Output

[1, 2, 3, 4]

Spread With Objects

const user = {
  name: "Ali",
  age: 22
};

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

console.log(updatedUser);

Output

{
  name: "Ali",
  age: 22,
  city: "Lucknow"
}

Updating Object Properties

const user = {
  name: "Ali",
  age: 22
};

const updated = {
  ...user,
  age: 23
};

console.log(updated);

What Is the Rest Operator?

Rest collects multiple values into one variable.

Rest Parameters in Functions

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

sum(1, 2, 3, 4);

Output

[1, 2, 3, 4]

Rest Collecting Values

Using Rest in Functions

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

console.log(total(10, 20, 30));

Output

60

Rest With Array Destructuring

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

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

console.log(first);
console.log(remaining);

Output

1
[2, 3, 4]

Spread vs Rest

Easy Way to Remember

Real-World Spread Example

Copying State in React

const user = {
  name: "Ali",
  age: 22
};

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

Real-World Rest Example

Flexible Function Arguments

function logMessages(...messages) {
  console.log(messages);
}

logMessages("Error", "Warning", "Success");

Common Beginner Mistake

Incorrect:

const merged = [array1, array2];

Result:

[[1,2],[3,4]]

Correct:

const merged = [...array1, ...array2];

Another Important Difference

Spread

Used on existing arrays/objects.

const copy = [...numbers];

Rest

Used while receiving values.

function test(...args) {}

Practice Exercises

Merge Arrays

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

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

console.log(result);

Rest Parameter Function

function multiply(multiplier, ...numbers) {
  return numbers.map(num => num * multiplier);
}

console.log(multiply(2, 1, 2, 3));

Output

[2, 4, 6]

Key Takeaways

Final Notes

Spread and rest operators are heavily used in modern JavaScript:

• React

• Node.js

• APIs

• Array manipulation

• Object updates

Understanding the difference is important because they appear frequently in:

• Interviews

• Real-world applications

• Modern frontend frameworks