Yash Purkar's Blog
Rest parameter & Spread operator.

Rest parameter & Spread operator.

Yash Purkar's photo
Yash Purkar
·

3 min read

Hi Guys, In this blog, I've tried to explain about Rest Parameter and Spread Operator.
When we see ... these 3 dots we get confused between rest and spread, Let's see the difference.

Rest parameter

The rest parameter allows us to pass an infinite number of function arguments.
The rest parameter is represented as ...

It collects the extra arguments and makes an array of them.

The rest parameter is used at the end.

✅ function sum(name, city, ...numbers)

We can't write at the start and in middle too.

❌ function sum(...numbers, name, city)

❌ function sum(name, ...numbers, city)

example-1

function myFun(num1, num2, ...remaining) {
  console.log(num1); //10
  console.log(num2); //20
  console.log(remaining); //[100,200,300,400]
}
myFun(10,20,100,200,300,400);

In the above example, The 10 will be assigned to the num1, The 20 will be assigned to the num2 and all extra arguments will be stored in the remaining as an array.

example-2

function addSomething(dontAddMe, ...rest) {
  console.log(dontAddMe) // Jack  
  console.log(rest); // [1,2,3,4,5]
  let sum = 0;
  for (let i = 0; i < rest.length; i++) {
    sum += rest[i];
  }
  return sum;
}

console.log(addSomething("Jack", 1, 2, 3, 4, 5));

The Jack Will be stored in dontPrintMe and the remaining arguments will be stored in the rest as an array like [1,2,3,4,5]

Here we don't want to add Jack, we want to add the numbers only, so we stored that Jack in dontAddMe, then the remaining arguments will be stored in rest as an array because of the rest parameter. And then we printed the sum of the numbers which is in the rest array using for loop.

Spread Operator

Spread operator syntax is similar to the rest parameter, but it is entirely opposite of it. This means the rest parameter collects the values and the Spread operator spreads the values.

The Spread operator is also represented as ...

example-1

const myArray = [1,2,3,4,5];
console.log(...myArray); // 1 2 3 4 5

As I said the spread operator spreads the values so the output will be 1 2 3 4 5 In this example, we spread the myArray array.

example-2

const array1 = [10, 20, 30, 40];
const array2 = [50, 60, 70, 80];
const array3 = [...array1, ...array2, 90, 100];

console.log(array3); // [10, 20, 30, 40,  50,60, 70, 80, 90, 100]

In the above example In array3 1st, we use ...array1 which means all the values of the array1 will spread, and those values will be assigned to array3 i.e 10,20,30,40 , then we use ...array2 which means the values of array2 will spread and those values will be assigned to array3, i.e [50,60,70,80] and at the end the array3 will be [10,20,30,40,50,60,70,80,90,100]

Spread operator with objects.

example-1

const obj1 = {
  name: "Jack",
  course: "MCA",
};

const obj2 = {
  age: 21,
};

const obj3 = { ...obj1, ...obj2 };
console.log(obj3); // { name: 'Jack', course: 'MCA', age: 21 }

In the above example, in obj3 we are spreading the values of obj1 and obj2, so the properties of obj1 and obj2 will be stored in obj3 so obj3 will be a new object with the properties name: "Jack", course: "MCA", age: 21

Thanks for reading
Hope you liked it😊

JavaScript