Understanding the Difference Between Rest and Spread Operators in JavaScript

In modern JavaScript (ES6 and onwards), you must have seen three dots (...) being used in many places. Sometimes they are called the rest operator, and sometimes the very same three dots are called the spread operator.

Although they look identical, their purpose changes depending on where they are used. In this blog, we’ll explore:

What the rest operator is and how it works
What the spread operator is and how it works
Practical examples of both
Key differences in a comparison table
Common interview questions on this topic

The Rest Operator (`...`)

The rest operator allows a function to accept any number of arguments as an array.

Example:

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

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

Here, ...numbers collects all parameters into an array.

Important Rule for Rest Operator

The rest parameter must always be the last parameter in the function.
Example of invalid code:

function test(...nums, a) {} // ❌ Invalid

Rest Operator vs `arguments` object

arguments is an array-like object (not a real array).
It doesn’t work inside arrow functions.
rest operator gives a true array and works with arrow functions.

The Spread Operator (`...`)

The spread operator is the opposite of rest. Instead of collecting values, it expands an array (or iterable) into individual elements.

Example: Merging arrays

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let merged = [...arr1, ...arr2];

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

Example: Using `Math.max()`

let nums = [4, 78, 90, 34, 59];
console.log(Math.max(...nums)); // 90

Here, without spread, Math.max(nums) would return NaN. With spread, the array is expanded into separate arguments.

Rest vs Spread Operator – Comparison

Feature	Rest Operator (`...`)	Spread Operator (`...`)
Purpose	Collects multiple values into an array	Expands an array into individual values
Use Case	Functions with variable parameters	Copying, merging arrays, spreading values
Example	`function sum(...nums) {}`	`[...arr1, ...arr2]`
Works With	Function parameters	Arrays, objects, iterables
Rule	Must be the last parameter	Can be used anywhere (arrays/objects)

Common Interview Questions

Can you use the arguments object in arrow functions?
→ No, arrow functions do not have their own arguments object. Use the rest operator instead.
What is the best way to copy an array in JavaScript?
→ Use the spread operator:
```
let arrCopy = [...originalArray];
```
How can you handle functions with unlimited parameters?
→ Use the rest operator to collect arguments into an array.
Can the rest operator be placed at the beginning of parameters?
→ No, it must always be the last parameter in the function signature.

FAQs

Q1. What is the rest operator in JavaScript?

The rest operator (...) collects multiple values into an array, often used in function parameters to handle unlimited arguments.

Q2. What is the spread operator in JavaScript?

The spread operator (...) expands arrays or objects into individual values, useful for merging arrays, copying, or passing values to functions.

Q3. Can we use the `arguments` object inside arrow functions?

No, arrow functions do not have their own arguments object. Instead, use the rest operator to handle parameters.

Q4. Where must the rest operator be placed in a function parameter list?

The rest operator must always be the last parameter in the list.

Q5. What is the difference between rest and spread operator?

Rest collects values into an array, while spread expands values from an array into separate elements.

Final Thought

Both the rest operator and spread operator use the same ... syntax but serve different purposes:

Rest packs values into an array (used in functions).
Spread unpacks values from an array (used in arrays, objects, and function calls).

Mastering both will make your JavaScript code more powerful and concise.

Understanding the Difference Between Rest and Spread Operators in JavaScript