Spread and Rest Operators in JavaScript Explained Simply
Introduction
In modern JavaScript, the three dots syntax ... is used very often. But many beginners get confused because the same syntax is used in two different ways.
These are called the spread operator and the rest operator.
Even though they look the same, they do opposite things. One expands values, and the other collects values.
In this blog, you will clearly understand both concepts with simple examples and real use cases.
What Spread Operator Does
The spread operator is used to expand values from an array or object.
Think of it like opening or spreading out elements.
Example with Array
const numbers = [1, 2, 3];
const newNumbers = [...numbers, 4, 5];
console.log(newNumbers); // [1, 2, 3, 4, 5]
Explanation
• It takes all elements from the array • Expands them into a new array • Helps combine or copy data
What Rest Operator Does
The rest operator is used to collect multiple values into a single variable.
Think of it like gathering or packing values together.
Example
function sum(...nums) {
return nums.reduce((acc, val) => acc + val, 0);
}
console.log(sum(1, 2, 3, 4)); // 10
Explanation
• All arguments are collected into an array • Makes handling multiple values easy
Expanding vs Collecting Values
This is the most important idea to remember.
Spread
• Expands values • Breaks array into individual elements
Rest
• Collects values • Combines multiple elements into one array
Differences Between Spread and Rest
Purpose
• Spread expands values • Rest collects values
Usage Position
• Spread is used while creating or copying data • Rest is used in function parameters or destructuring
Behavior
• Spread breaks structure • Rest builds structure
Using Spread with Arrays
Copying an Array
const arr = [1, 2, 3];
const copy = [...arr];
Merging Arrays
const a = [1, 2];
const b = [3, 4];
const merged = [...a, ...b];
Adding Elements
const arr = [2, 3];
const newArr = [1, ...arr, 4];
Using Spread with Objects
Copying Object
const user = { name: "Koushik" };
const newUser = { ...user };
Updating Values
const user = { name: "Koushik", age: 20 };
const updated = { ...user, age: 21 };
Merging Objects
const a = { x: 1 };
const b = { y: 2 };
const result = { ...a, ...b };
Using Rest in Destructuring
Array Example
const numbers = [1, 2, 3, 4];
const [first, ...rest] = numbers;
console.log(first); // 1
console.log(rest); // [2, 3, 4]
Object Example
const user = {
name: "Koushik",
age: 20,
city: "Malda"
};
const { name, ...others } = user;
console.log(name); // Koushik
console.log(others); // { age: 20, city: "Malda" }
Practical Use Cases
1. Avoid Mutating Original Data
const arr = [1, 2, 3];
const newArr = [...arr];
• Keeps original data safe
2. Flexible Function Arguments
function logNames(...names) {
console.log(names);
}
• Accept any number of inputs
3. Updating State (Very Common in React)
const state = { count: 1 };
const newState = { ...state, count: 2 };
• Creates a new updated object
4. Combining Data
const fruits = ["apple"];
const moreFruits = ["banana"];
const all = [...fruits, ...moreFruits];
Real Understanding
Remember this simple rule:
Spread means unpack values Rest means pack values
If you keep this idea clear, you will never get confused.
Conclusion
Spread and rest operators are small features but very powerful. They make your code cleaner, shorter, and easier to understand.
Once you start using them, you will notice how simple it becomes to copy, merge, and manage data in JavaScript. These operators are used everywhere in modern development, so mastering them is very important.
