Spread vs Rest Operators in JavaScript
JavaScript introduced the spread and rest operators to make working with arrays, objects, and function arguments much easier.
Both operators use the same syntax:
...
But depending on where and how they are used, they behave differently.
This often confuses beginners.
In this article, we’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
Let’s begin.
Understanding the ... Syntax
The three dots syntax:
...
can either:
expand values → Spread
collect values → Rest
The behavior depends on the context.
What Is the Spread Operator?
The spread operator is used to:
Expand values
It takes elements from an array or object and spreads them out individually.
Spread Operator with Arrays
Example:
const numbers = [1, 2, 3];
console.log(...numbers);
Output:
1 2 3
The array elements are expanded individually.
Spread Visualization
[1, 2, 3]
↓
...numbers
↓
1, 2, 3
Spread breaks elements apart.
Copying Arrays Using Spread
Example:
const arr1 = [1, 2, 3];
const arr2 = [...arr1];
console.log(arr2);
Output:
[1, 2, 3]
This creates a shallow copy of the array.
Merging Arrays
Example:
const a = [1, 2];
const b = [3, 4];
const result = [...a, ...b];
console.log(result);
Output:
[1, 2, 3, 4]
This is much cleaner than older methods.
Spread with Objects
Spread also works with objects.
Example:
const user = {
name: "Rahul",
age: 22
};
const updatedUser = {
...user,
city: "Delhi"
};
console.log(updatedUser);
Output:
{
name: "Rahul",
age: 22,
city: "Delhi"
}
Object Spread Visualization
user object
↓
Spread properties
↓
New object created
Updating Object Properties
Example:
const user = {
name: "Rahul",
age: 22
};
const updatedUser = {
...user,
age: 23
};
console.log(updatedUser);
Output:
{
name: "Rahul",
age: 23
}
The new value overrides the old one.
What Is the Rest Operator?
The rest operator is used to:
Collect multiple values into one
Instead of expanding values, it gathers them together.
Rest Operator in Functions
Example:
function sum(...numbers) {
console.log(numbers);
}
sum(1, 2, 3, 4);
Output:
[1, 2, 3, 4]
The rest operator collects all arguments into an array.
Rest Visualization
1, 2, 3, 4
↓
...numbers
↓
[1, 2, 3, 4]
Rest groups values together.
Using Rest for Flexible Functions
Example:
function total(...nums) {
let sum = 0;
for (let num of nums) {
sum += num;
}
return sum;
}
console.log(total(1, 2, 3));
Output:
6
This allows functions to accept any number of arguments.
Rest with Array Destructuring
Example:
const numbers = [1, 2, 3, 4];
const [first, ...rest] = numbers;
console.log(first);
console.log(rest);
Output:
1
[2, 3, 4]
Here:
first value goes into
firstremaining values go into
rest
Spread vs Rest
| Feature | Spread | Rest |
|---|---|---|
| Purpose | Expands values | Collects values |
| Direction | Break apart | Gather together |
| Common Usage | Arrays, objects | Function arguments |
| Result | Individual elements | Single array/object |
Simple Comparison
Spread
const arr = [1, 2, 3];
console.log(...arr);
Expands values.
Rest
function test(...args) {
console.log(args);
}
Collects values.
Real-World Use Cases of Spread
Copying Arrays
const copy = [...original];
Merging Arrays
const merged = [...a, ...b];
Updating React State
setUser({
...user,
age: 25
});
Very common in React applications.
Real-World Use Cases of Rest
Unlimited Function Arguments
function log(...messages) {}
Collect Remaining Values
const [first, ...others] = arr;
Useful in destructuring.
Common Beginner Mistakes
Confusing Spread and Rest
Remember:
Spread → Expands
Rest → Collects
Forgetting Rest Must Be Last
Wrong:
const [...rest, last] = arr;
Correct:
const [first, ...rest] = arr;
Rest element must be last.
Thinking Spread Creates Deep Copy
Spread creates only a shallow copy.
Nested objects are still shared.
Practice Assignment
Try these exercises yourself.
1. Copy an Array
Use spread to create a copy.
2. Merge Two Arrays
Combine arrays using:
...
3. Create Flexible Sum Function
Use rest operator to accept unlimited numbers.
4. Use Object Spread
Add a new property to an existing object.
5. Use Array Destructuring
Extract first value and remaining values separately.
Final Thoughts
Spread and rest operators are some of the most useful modern JavaScript features.
They help developers write:
cleaner code
shorter code
more readable code
The key difference is:
Spread → expands values
Rest → collects values
Understanding these operators is extremely important because they are widely used in:
React
Node.js
APIs
Array manipulation
Object updates
Modern JavaScript applications
Once you get comfortable with them, your JavaScript code becomes much cleaner and more professional.
And now, you know what Spread and Rest Operators in JavaScript are.
If you have any doubt or want to connect, feel free to drop a comment — I’d be happy to help.
Thanks for reading, and see you in the next blog!
Peace ✌️ and Happy Learning!
