Spread And Rest Operator in Javascript

The … operator has been there for a long time since ES6 was introduced in javascript and it is being used for the representation of both the spread and rest operator in javascript. It is a very useful operator that helps javascript developers to manipulate arrays and objects very easily. But the problem with the … operator is most people get confused between the two while learning javascript as … representation is used for both spread and rest operators in javascript. To overcome this challenge we will be discussing with you some of the scenarios and use cases of both spread and rest operator in javascript.

Spread Operator (…)

Let us take the example of a box. The spread operator is generally known for grabbing all the elements of the box without grabbing the box itself and putting all the content wherever we want.

Let us take an example to know more about spread operator in javascript

Example : 

const box = ["bat","blanket","ball","clothes"];
const someOtherBox = [...box];
function getBoxData(data1,data2,data3,data4){

console.log(data1,data2,data3,data4);
}

getBoxData(...someOtherBox);

 

Output :

Spread Operator Example
In the above example spread operator is used to copy the contents of the box array into someOtherBox array. The spread operator can also be used for copying the contents of multiple arrays into another array.

Example : 

const box = ["bat","blanket","ball","clothes"];
const someOtherBox = ["water-bottles","dryfruits","badminton"];
const box2=[...box,...someOtherBox]
function getBoxData(data1,data2,data3,data4,data5,data6,data7){
console.log(data1,data2,data3,data4,data5,data6,data7);
}
getBoxData(...box2);

Output :

Spread Operator Example

 

Now we will see how the spread operator works with objects in javascript with an example. In this example, we will also show you how to overwrite the value of key value pair in javascript.

Example : 

var student = {
name:"Ajay",
age:28,
hobbies:["cricket","singing"]
}
var newStudent = {
...student,
age:29
}
console.log(newStudent);

Output : 

Spread Operator Example
In the above example, we have used a spread operator for copying the content of student object into a new object named as newStudent other than that we are also updating the key value pair of age to 29.

Rest Operator(…)

Rest operator is used for the representation of the indefinite number of arguments as an array. As we all know that the spread operator is used to spread out the elements in an array, the rest operator is used to gather or group multiple elements into an array. Now we will see an example of how the rest operator is implemented practically.

 

Example : 

function addNumbers(a,b,c,...others){
console.log(others);
return a+b+c;
}
const res = addNumbers(2,5,6,8,9,7,8,9);
console.log(res);

Output : 

Rest Operator Example
In the above example we have passed three parameters and with the use of the rest operator we are taking the other values passed to the function addNumbers. So, the remaining values other than a,b,c are passed to others as an array. This is the beauty of the rest operator in javascript it groups all the remaining elements into an array. With the rest operator, we can take as many values as we want and pass them into the others as an array.
Now we will see how the rest operator works with objects in javascript with an example.

Example : 

var student = {
name:"Ajay",
age:"28",
hobbies:["Cricket","Singing"]
}
const {...rest} = student;
console.log(rest);

Output :

Rest Operator Example
In this case, we are just passing the key-value pair of student objects as rest using the rest operator in javascript. Other than that we are using the concept of array destructuring to get the key-value pairs of the objects very easily.
Conclusion

This is very brief and crisp information about the use of spread and rest operator in javascript. Finally, we can draw a conclusion that spread operator is used to spread the content of an array while the rest operator is used to group or gather elements(arguments to a function) into an array.

Hopefully, by reading this article I am sure that you would have got a decent knowledge about the use case of spread and rest operator in javascript. If you have any other suggestions to improve the quality of this article then you can put them down in the comment section so that we can implement the changes accordingly.

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Stay Connected

0FansLike
3,498FollowersFollow
19,400SubscribersSubscribe
- Advertisement -spot_img

Latest Articles