Spread vs Rest Operators in JavaScript
The spread (...) and rest (...) operators are among the most useful modern features in JavaScript.
At first, they may look confusing because both use the same three dots syntax:
...
But they work differently depending on where they are used.
In this beginner-friendly guide, you’ll learn:
What the spread operator does
What the rest operator does
Differences between spread and rest
Using spread with arrays and objects
Practical real-world use cases
By the end, you’ll clearly understand when to use each one.
Why Were Spread and Rest Introduced?
Before these operators existed, tasks like:
Copying arrays
Merging objects
Handling multiple function arguments
required more complicated code.
Spread and rest operators made JavaScript cleaner and easier to read.
Understanding the Main Idea
The easiest way to remember them is:
| Operator | Meaning |
|---|---|
| Spread | Expands values |
| Rest | Collects values |
Visual Understanding
Spread Operator
[1, 2, 3]
│
▼
1, 2, 3
Spread takes grouped values and expands them.
Rest Operator
1, 2, 3
│
▼
[1, 2, 3]
Rest collects multiple values into one structure.
What is the Spread Operator?
The spread operator expands elements from arrays, objects, or iterable values.
Syntax:
...
Spread with Arrays
Example
const numbers = [1, 2, 3];
console.log(...numbers);
Output:
1 2 3
The array gets expanded into individual values.
Spread Expanding Elements Diagram
Array
[1, 2, 3]
Spread (...)
1 2 3
Copying Arrays Using Spread
Before spread, copying arrays was more difficult.
Now it becomes simple.
Example
const original = [1, 2, 3];
const copy = [...original];
console.log(copy);
Output:
[1, 2, 3]
Why This is Useful
If you directly assign arrays:
const copy = original;
both variables point to the same array.
Spread creates a separate copy.
Merging Arrays with Spread
Example
const arr1 = [1, 2];
const arr2 = [3, 4];
const merged = [...arr1, ...arr2];
console.log(merged);
Output:
[1, 2, 3, 4]
Adding Elements While Copying
const numbers = [2, 3];
const updated = [1, ...numbers, 4];
console.log(updated);
Output:
[1, 2, 3, 4]
Spread with Objects
Spread also works with objects.
Copying Objects
const user = {
name: "Hitesh",
age: 22
};
const copiedUser = { ...user };
console.log(copiedUser);
Output:
{ name: 'Hitesh', age: 22 }
Merging Objects
const user = {
name: "Hitesh"
};
const details = {
city: "Delhi"
};
const profile = {
...user,
...details
};
console.log(profile);
Output:
{ name: 'Hitesh', city: 'Delhi' }
Updating Object Properties
const user = {
name: "Hitesh",
age: 22
};
const updatedUser = {
...user,
age: 23
};
console.log(updatedUser);
Output:
{ name: 'Hitesh', age: 23 }
Real-World Use Case of Spread
Spread is commonly used in:
React state updates
Copying API responses
Combining configurations
Updating arrays without mutation
Popular frontend libraries like React use spread operators heavily.
What is the Rest Operator?
The rest operator collects multiple values into a single structure.
It is commonly used in:
Function parameters
Array destructuring
Object destructuring
Rest Operator in Functions
Example
function sum(...numbers) {
console.log(numbers);
}
sum(1, 2, 3, 4);
Output:
[1, 2, 3, 4]
Understanding the Logic
The rest operator:
Takes all remaining values
Collects them into an array
Rest Collecting Values Diagram
1 2 3 4
\ | | /
▼
[1, 2, 3, 4]
Practical Example: Sum Function
function sum(...numbers) {
let total = 0;
for (let num of numbers) {
total += num;
}
return total;
}
console.log(sum(1, 2, 3, 4));
Output:
10
Rest with Array Destructuring
Example
const numbers = [1, 2, 3, 4];
const [first, ...remaining] = numbers;
console.log(first);
console.log(remaining);
Output:
1
[2, 3, 4]
Rest with Object Destructuring
const user = {
name: "Hitesh",
age: 22,
city: "Delhi"
};
const { name, ...otherDetails } = user;
console.log(name);
console.log(otherDetails);
Output:
Hitesh
{ age: 22, city: 'Delhi' }
Difference Between Spread and Rest
Although both use ..., their behavior is different.
Comparison Table
| Spread Operator | Rest Operator |
|---|---|
| Expands values | Collects values |
| Used while copying/merging | Used while gathering data |
| Converts array → individual values | Converts multiple values → array |
| Common in arrays/objects | Common in function parameters |
Simple Mental Trick
Spread
“Break things apart”
Example:
[1, 2, 3] → 1, 2, 3
Rest
“Collect things together”
Example:
1, 2, 3 → [1, 2, 3]
Common Beginner Mistakes
1. Confusing Spread and Rest
Both use:
...
But context decides behavior.
2. Rest Must Be Last Parameter
Wrong:
function test(...nums, value)
Correct:
function test(value, ...nums)
3. Spread Works Only on Iterable Values
This works:
const arr = [1, 2];
console.log(...arr);
But spreading non-iterables causes errors.
Real-World Usage Patterns
1. Copying State Objects
const updatedState = {
...state,
loading: true
};
2. Combining API Data
const combined = [...users, ...admins];
3. Flexible Function Arguments
function logMessages(...messages) {
console.log(messages);
}
Assignment Practice
Try solving this yourself.
Task
Create two arrays
Merge them using spread
Create a function using rest parameters
Print all collected values
Example Solution
const arr1 = [1, 2];
const arr2 = [3, 4];
const merged = [...arr1, ...arr2];
console.log(merged);
function printValues(...values) {
console.log(values);
}
printValues(10, 20, 30);
Final Thoughts
Spread and rest operators are essential modern JavaScript features.
You learned:
✅ What spread operator does ✅ What rest operator does ✅ Difference between spread and rest ✅ Using spread with arrays and objects ✅ Real-world use cases
The key idea to remember:
Spread expands
Rest collects
Once this concept becomes clear, these operators become very easy to use in real-world applications.