Spread vs Rest Operators in JavaScript

Hello readers, this blog is on one of the simple topics that is heavily used in modern JS. The concept is quite simple, however it could be confusing to a few who are trying to study it for the very first time.

This blog is all about spread and rest operator in JS.

What is Spread and Rest Operator in JS

In JS when you want to play around with the data that is held in different structures like arrays and objects, you will find a few tools quite handy, spread and rest are one of those tools in your arsenal.

The interesting thing about spread and rest operator is that they both have the same syntax to use them (i.e. ... ). You might think if both happen to have the same syntax, then how can they behave any different that each other, the answer to your question is context. Using ... in different contexts can mean using either the spread operator or the rest operator.

What Spread Operator does?

The syntax for spread operator is ... . It is used to expand values.

It takes something iterable (like an array or object) and spreads its elements out.

const arr = [1, 2, 3];
console.log(...arr); // 1 2 3

What Rest Operator does?

The syntax for rest operator is ... . It is used to store the values from a structure into a single structure.

function sum(...numbers) {
  return numbers.reduce((a, b) => a + b, 0);
}

Difference between Spread and Rest Operator.

Below table would be a quick summary on the differences between the spread and the rest operator.

Like I earlier said, Spread and Rest both have similar syntax, the difference between the two is because of the context in which they are used.

Using spread with arrays & objects

The spread (...) operator which is used to expand values is often used with arrays and objects for different scenarios as explained below:

Spread with Arrays

You can use spread to create new arrays from existing ones without any mutation, you can merge two arrays into one and decide the order in which the array should appear.

const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4];

Spread with Objects

The same stuff which you did with Arrays earlier could be done here for the key value pairs of the object. The spread operator in object copies properties into a new object.

const obj1 = { a: 1 };
const obj2 = { ...obj1, b: 2 };

Practical use cases for spread

• Cloning arrays/objects

• Merging data

• Passing arguments to functions

• React state updates (immutability)

Using rest with arrays & objects

When you change the context from spreading values to collecting values from structures, you start using the rest operator

Rest with Arrays

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

const [first, second, ...remaining] = arr

In the above example, if you want to get the rest of the elements apart from the first and second you can simply use the rest operator, which in this case is collecting the values and putting it into a variable.

Rest with Objects

const user = {
  name: "Saurav",
  age: 22,
  city: "BBS",
};

const { name, ...rest } = user;

console.log(name); // "Saurav"
console.log(rest); // { age: 22, city: "BBS" }

The rest operator (...) in objects is used to collect remaining properties into a new object. It’s commonly used with object destructuring.

const { a, ...rest, b } = obj; ❌ // Error

Practical use cases for rest

• handling variable number of arguments (variadic functions): This is used when you don't know the number of arguments that will be coming

  function sum(...numbers) {
    return numbers.reduce((a, b) => a + b, 0);
  }
  

• Separating Important vs Remaining data

  const user = {
    id: 1,
    name: "Saurav",
    password: "1234",
  };
  
  const { password, ...safeUser } = user;
  

• Destructuring with flexibility

• Prop Handling in React

• Function Arguments Forwarding (Wrapper Functions)

Conclusion

This is it for this blog, I hope you have understood the use cases of spread and rest operator, the difference between the two arises in the way they are used, Spead operator is used to spread values, while Rest operator is used to collect the values from a structure.

These two are heavily used in modern JS.