Spread vs Rest Operator in JS

Introduciton

Hello readers,

Welcome to another blog in the JS series. Now, a days i'm covering topics which are going to be used in your code regularly. In the previous blog, I covered destructuring in JS.

If you have not read that blog yet, then please go through it. The blog is short, but it is very important to write clean code. Here is the link: https://js-with-abhishek.hashnode.dev/destructuring

In this blog, I'm going to cover the spread and rest operator. Both use the same operator (...) but behave differently.

Trust me, the definition is really easy, but the behaviour is a little bit tricky. I will also give you some real-life examples, which will help you to understand the difference between them.

Let's start the blog.

What is the spread operator?

The spread operator spreads (expands) the elements of arrays or objects. That's it.

Example:

const arr = [1, 2, 3];

console.log(...arr); 
// 1 2 3

Here, arr values are expanded because of the spread operator and print. I can also say that:

Instead of passing the array, I am passing each value individually.

Spread with Arrays

Let's see some real use cases of the spread operator in arrays. This will help you to understand the spread operator in a better way.

1. Merging the array values into a single array

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

const merged = [...arr1, ...arr2];

console.log(merged);

Here, we expanded the arr1 and arr2 values into a single merged array.

2. Copying Arrays

const original = [1, 2, 3];
const copy = [...original];
console.log(copy);

Here, we make a copy of the original by expanding the value of the original array into a copy array. This is a shallow copy (not a reference)

I hope you understood the spread operator use cases with arrays. Let's see how the spread operator works in objects.

Spread with Objects

const user = { name: "Abhishek", age: 22 };

const updatedUser = {
  ...user,
  age: 23
};

console.log(updatedUser);

Yes, we can use the spread operator to update the keys. In the above example, user values (key: value) expanded, but there is an age key at the last, so that key overrode the previous one (age: 22)

And the rest of the working of the spread operator is the same as in an array.

What is Rest Operator?

Rest collects the values into one variable. That's it.

Here are some examples, which will help you to understand the rest operator.

1. Rest in Function Parameters

function sum(...numbers) {
    console.log(numbers)    
  return numbers.reduce((acc, curr) => acc + curr, 0);
}

console.log("sum: ", sum(1, 2, 3, 4))

Here, all the arguments passed in the sum function are collected into a single variable numbers, which is an array.

2. Rest in Array Destructuring

const [first, ...rest] = [10, 20, 30, 40];

console.log(first); // 10
console.log(rest);  // [20, 30, 40]

Here, the first value is separated, and the rest of the values are collected into the rest variable as an array.

This same concept also applies to the rest operator in the function parameter. If you use some variable before using the rest operator, then first those variables will be assigned, and then the rest of the value will be collected into the rest operator variable.

3. Rest in Object Destructuring

const user = { id: 1, name: "Abhishek", password: "1234" };

const { password, ...safeUser } = user;

console.log(safeUser);
// { id: 1, name: "Abhishek" }

This is the same as the above example, just the data type is changed. Here, the name is separated, and the rest of the values are collected in the form of an object.

Spread v/s Rest

That's it for this blog. These concepts are not very vast, but it's important that you use them so that your code is more readable and clean. I hope this blog helps you to understand the difference between the Spread and Rest Operator.

I will see you in another interesting and useful blog. Till then...

Stay consistent and keep grinding....

Peace✌️