Rest parameters vs Spread operator ( … ) three dots in Javascript

… (three dots) operator is a common operator nowadays if you write Javascript. It is a functionality shifter superhero is Javascript. Why I say functionality shifter is because it changes its functioning depends upon where you will use this operator. In this article, we will see in brief the Rest parameters and Spread operator ( … ) three dots in Javascript.

Lets see them one by one with an example without any further ado.

Rest parameters

As the name itself implies rest parameters, we get the idea like we are calling all remaining (rest) parameters. Lets see an example to make it more clear.

function logNumbers(...allnumbers) {
  allnumbers.forEach( number => console.log(number) )
}

logNumbers(1, 2, 3);

So in the above snippet, you can see we have a function definition and on the last line we are calling that function. Here is a fun fact we are passing 3 parameters while calling the function logNumbers(1,2,3) and in function definition we are accepting those 3 parameters as ...allnumbers .

So ...allnumbers is here referred to as rest parameters because instead of accepting three parameters individually we are accepting through three dots (…) which converts all parameters into an array.

One can also use rest parameters partially like below snippet.

function logNumbers(one, ...allnumbers) {
console.log(one)
  allnumbers.forEach( number => console.log(number) )
}

logNumbers(1, 2, 3);

So here the first parameter will accept the first parameters among (1,2,3) which is one. And all remaining that is (2,3) will be in allnumbers as an array.

Spread Operator

Three dots (…) also referred to as spread operators, only array and objects can be spread. Spread operator can be applied to the array, object, functions. In Rest parameters, we saw we can get all remaining parameters while defining functions. The spread operator works opposite to the Rest parameter, Rest parameter group all parameters into the array where the Spread operator restructure (spread) already created arrays, objects. Let’s see an example with all its possible areas like array, objects, functions.

Spread in function

function sum(x, y, z) {
  console.log(x + y + z);
}

const numbers = [1, 2, 3];

sum(...numbers);//spread here

So as you can see we are using three dots while calling the function sum(...numbers) not while creating (defining) the function. This example explains a lot one difference between rest and spread.

Spread in array

In the above snippet, we can see we have created variable numbers which is an array then we are spreading that array inside the function. So now let’s say you have two arrays and you want to merge them both.

const firstArray = ['john','mike'];
const secondArray = ['kyle','shane', ...firstArray];
console.log(secondArray);
//output - ['kyle','shane','john','mike'];

isn’t it a great feature of ES6? Traditionally if you had to do this you could have used the push or merge the function of javascript. But we have something so cool and easy to write.

Spread in Objects

Like above we merged two arrays or added first array into the second array. Lets see the same thing in Objects.

const firstObj = {firstname:'john', lastname:'doe'};
const secondObj ={age:21, dob:'29/10/20' , ...firstObj};
console.log(secondObj);
//output - {age:21, dob:'29/10/20' ,firstname:'john', lastname:'doe'};

You can spread the firstObj before age and dob like this.

const secondObj ={...firstObj,age:21, dob:'29/10/20'};

Conclusion

So in the end we can say three dots works upon where it is being used. In functions if we use three dots in function defintion it becomes Rest parameters and if we use three dots while calling the function, it becomes Spread Operator.

Basically Rest parameters group multiple parameters into one array unlike spread operator which does the opposite spread array and objects.

So that’s all about Rest parameters vs Spread operator ( … ) three dots in Javascript. If you have any queries write int he below comment sections.

Thank you.

See also,

Leave a Reply

Your email address will not be published. Required fields are marked *