Spread vs Rest Operators in JavaScript

#javascript #beginners #discuss #frontend

Lately i have been writing a lot of backend code and kept getting confuse when to use spread operator and when to use rest

While searching the solution i realized many developers have same problem.

So in this blog i will break it down simply when to use each and common mistakes to avoid.

Topics to Cover

What rest operator does
What spread operator does
Differences between spread and rest
When to Use the Rest and Spread Operator

The Rest and Spread operator are two different operators but both uses three dots (...) so they can be confusing.

Why are they using three dots in JavaScript if they are not same lets see individually

Rest Operator

Think of rest exactly like it name
It means give me the rest of the values that are left


const user = {
  id: 1,
  name: "Kunal",
  email: "kunal@gmail.com",
  role: "admin",
  password: "secret"
};

// REST → extract password, collect remaining
const { password, ...safeUser } = user;

console.log(safeUser);

The output of the above code


// Password is extracted 
{ id: 1, name: "Kunal", email: "kunal@gmail.com", role: "admin" }

A rest operator is a type of parameter that gets all of the remaining parameters of a function call via an Array as you can see on the above code.

It is very helpful during array and object destructing.

You also notice something when we want to destruct something from user we put the rest operator on left side but its not same as spread.


// LEFT(extracted field and rest)        RIGHT (data in which value is                      
                                                      extracted)
const { password, ...safeUser }     =    user;

Spread Operator

Think of spread operator also like its name
It means opens everything inside this and put it here


const user = {
  id: 1,
  name: "Kunal",
  email: "kunal@gmail.com",
  role: "admin",
  password: "secret"
};

// SPREAD → merge / update object
const updatedUser = {
   ...user ,
   role : "user"
}

console.log(updatedUser)

Output of the above code


{ 
id: 1, 
name: "Kunal", 
email: "kunal@gmail.com", 
role: "user" , 
password : "secret" 
}

The spread operator is mostly used if you want to duplicate the content of an array or combine multiple object/array together

For instance if we have a object of user and we want to update or add the fields instead of manually looping we use the spread operator to do in a cleaner way like we did in the above code.

Spread is used on the right side to expand the data you already have. So You can add or update the existing Array/Object.


const updatedUser = {...user , role : "user" }

Differences between Spread and Rest Operator

Feature	Spread Operator	Rest Operator
Purpose	Expands values	Collects remaining values
Use position	Right side (usage)	Left side (destructuring/params)
Output	Individual values	Array or object
Use case	Copy, merge, pass values	Gather remaining values
Behavior	Opens data	Packs remaining data