Spread vs Rest Operators in JavaScript

In modern JavaScript (ES6 and beyond), you will frequently see three little dots ... sprinkled throughout the code.

For beginners, these three dots are notorious for causing confusion. Why? Because depending on where you use them, they do two completely opposite things!

Sometimes they act as the Spread operator, and sometimes they act as the Rest operator.

To make this simple: Spread unpacks a box, while Rest packs items into a box. Let us explore how these two operators work, the difference between them, and how you can use them to write cleaner JavaScript.

What spread operator does

Imagine you are moving to a new apartment. You have a box labelled "Kitchen Stuff." When you arrive, you open the box, take everything out, and spread the items across your new kitchen counters.

In JavaScript, the Spread operator takes an iterable (like an Array or an Object) and unpacks its elements into a new location.

What rest operator does

If Spread takes things out of a box, the Rest operator puts things into a box.

It is used to collect multiple independent elements and condense them into a single array. You will almost always see the Rest operator used inside function parameters or during destructuring.

Differences between spread and rest

How do you know which one you are looking at? It all depends on where the three dots are placed.

Feature	Spread Operator (...)	Rest Operator (...)
Purpose	To unpack or expand elements.	To pack or collect elements.
Location	Used in function calls, array literals, or object literals.	Used in function parameters or destructuring assignments.
Analogy	Emptying a bag onto a table.	Sweeping items off a table into a bag.

Using spread with arrays and objects

Before spread, combining or copying arrays required clunky methods like concat(). Now, it is effortless.

const fruits = ["Apple", "Banana"];
const vegetables = ["Carrot", "Spinach"];
// 1. Copying an array
const fruitsCopy = [...fruits]; 
console.log(fruitsCopy);
// 2. Combining arrays seamlessly
const groceries = [...fruits, "Milk", ...vegetables];
console.log(groceries); 
// Outputs: ["Apple", "Banana", "Milk", "Carrot", "Spinach"]

E:\Hitesh_Web_Dev_2026\blog_folder\13.JS-Spread vs rest Operators in JavaScript>node 13assign.js 
[ 'Apple', 'Banana' ] 
[ 'Apple', 'Banana', 'Milk', 'Carrot', 'Spinach' ]

Notice how we completely unpacked the fruits and vegetables arrays and placed their individual items into the new groceries array.

Using Spread with Objects

Spread is incredibly useful in modern frameworks like React for updating objects without mutating (changing) the original data.

const user = { name: "Rajesh", age: 25 };
// Unpack the user object, and add a new property
const updatedUser = { ...user, location: "Delhi" };
console.log(updatedUser); 
// Outputs: { name: 'Rajesh', age: 25, location: 'Delhi' }

E:\Hitesh_Web_Dev_2026\blog_folder\13.JS-Spread vs rest Operators in JavaScript>node 13assign.js 
{ name: 'Rajesh', age: 25, location: 'Delhi' }

Using Rest in Functions

Imagine you are writing a function to calculate the total score of a game. But you don't know how many rounds the player will play. They might pass in 2 numbers, or they might pass in 10.

Instead of writing function sum(a, b, c, d...), you use the Rest operator to gather "the rest" of the arguments into a neat little array.

// The ...scores parameter gathers all passed arguments into an array
function calculateTotal(...scores) {
  // Now we can use array methods like reduce!
  return scores.reduce((total, score) => total + score, 0);
}
console.log(calculateTotal(10, 20)); // Outputs: 30
console.log(calculateTotal(5, 10, 15, 20, 25)); // Outputs: 75

E:\Hitesh_Web_Dev_2026\blog_folder\13.JS-Spread vs rest Operators in JavaScript>node 13assign.js 
30 
75

Using Rest in Destructuring

When you destructure an array or an object, you can grab the specific items you want and use the Rest operator to scoop up whatever is left over.

const runners = ["Alia", "Bikash", "Charan", "Dhiraj"];
// Grab the first two, pack "the rest" into a new array
const [firstPlace, secondPlace, ...others] = runners;
console.log(firstPlace); // Outputs: "Alia"
console.log(others);     // Outputs: ["Charan", "DHiraj"]
console.log(secondPlace); // Outputs: "Bikash"

E:\Hitesh_Web_Dev_2026\blog_folder\13.JS-Spread vs rest Operators in JavaScript>node 13assign.js 
Alia 
[ 'Charan', 'Dhiraj' ] 
Bikash

Practical Assignment: Put it into Practice

As part of my web development cohort, here is a practical script demonstrating both operators in action. Open your browser console and try running this!

// ==========================================
// 1. Using SPREAD to merge data
// ==========================================
const frontendTech = ["HTML", "CSS", "React"];
const backendTech = ["Node.js", "MongoDB"];
// We unpack both arrays into a new Fullstack array
const fullstackDeveloper = [...frontendTech, ...backendTech];
console.log("Full Stack Skills:", fullstackDeveloper);
// ==========================================
// 2. Using REST to collect function arguments
// ==========================================
// The first param is the name, '...skills' packs the rest into an array
function hireDeveloper(name, ...skills) { 
    console.log(\nHiring: ${name}); 
    console.log(They have ${skills.length} skills.); 
    console.log(Skills include: ${skills.join(", ")}); }
// Watch how we pass multiple loose arguments! 
hireDeveloper("Vivek", "JavaScript", "Python", "SQL", "Git");
// ==========================================
// 3. Using SPREAD and REST together!
// ==========================================
const recipe = {
  name: "Kheer",
  rice: "2 cups",
  milk: "8 cups",
  sugar: "2 tablespoons",
  dryFruits: "1 cup",
};
// We use REST to pull out the name, and box up the remaining ingredients
const { name, ...ingredients } = recipe;
console.log(`\nRecipe Name: ${name}`);
console.log("Ingredients object:", ingredients); 
// Notice the 'ingredients' object no longer has the 'name' property!

E:\Hitesh_Web_Dev_2026\blog_folder\13.JS-Spread vs rest Operators in JavaScript>node 13assign.js 
Full Stack Skills: [ 'HTML', 'CSS', 'React', 'Node.js', 'MongoDB' ]

Hiring: Vivek 
They have 4 skills. 
Skills include: JavaScript, Python, SQL, Git

Recipe Name: Kheer 
Ingredients object: { rice: '2 cups', milk: '8 cups', sugar: '2 tablespoons', dryFruits: '1 cup' }

Conclusion

The ... syntax is one of the most powerful and heavily used features in modern JavaScript. Whether you are spreading an old array into a new one to avoid mutating data, or using rest to scoop up a massive list of function arguments, these three little dots will make your code significantly cleaner and more professional.

By understanding and utilizing these operators, you can write more concise, readable, and expressive code, making your JavaScript applications cleaner and more efficient.