Understand Rest & Spread Operator in JavaScript
Some JavaScript Tips for beginners to understand the difference between Rest Operator vs Spread Operator
INTRODUCTION
The Rest Parameter and Spread Operator can be very confusing to beginners while coding. I read a lot of long articles based on this topic, and decided to write a short article that can help beginners to understand the difference between the two terms in as simple an explanation as possible.
REST PARAMETER
The Rest Parameter enables us to pass any number of parameters to a function and then access them all in an array. The rest parameter is prefixed with three dots (…).
Both the Rest Parameter as well as the Spread Operator have similar syntax, that of the three dots that is, (…), however the three dots does not work in similar ways with rest and spread. Unlike as in the case of spread operator, the rest parameter has to be the last argument because it is used to collect all of the remaining (any number) elements and pack them into an array, to serve as the last argument of the function.
The Rest Parameters can be used with destructuring of Arrays (that involves breaking down a complex structure into simpler parts). The arguments that are passed in, will be split down into the array and rests inside the array. By using the rest parameter, we can collect and put the remaining elements of an array in a new array and the after packing all the elements into an array, it will Rest as the Last argument of the function. Hence the term rest parameter.
Let us consider an example of rest operator in the below code example.
const [pet1, pet2, ...args] = [’cats’, 'dogs’, 'rabbits’, 'monkeys’]
console.log(pet1, pet2, args);
//Outcome
‘cats’
‘dogs’
[‘rabbits’,’monkeys’];
In the above example, the array containing ‘rabbits’ and ‘monkeys’ are RESTING inside the array formed by collecting or catching the rest of the arguments other than the defined pet1 and pet2 .So the rest of the arguments will be collected together and compressed inside the args which is the last argument followed by the three dots in the code syntax above. Hence, the rest parameter is letting all the collected arguments to be compactly packed all together and compressing them inside an array. It’s like collecting many items from all the rooms and putting them or packing them or stacking them into a box or container!
SPREAD OPERATOR
By definition, the Spread Operator is the operator that enables us to spread out the value of an array across zero or more arguments in a function or elements in an array. Let us consider a simple example to understand the Spread Operator. The JavaScript spread operator (...) allows us to quickly copy all or part of an existing array or object into another array or object. In the example provided below, the values of arrays A and B are copied quickly into array C , by using the (…) operator as shown below. In the outcome, we notice how the values of variables A and B are spread out in the variable C by using the spread operator.
const A = [100,200,300];
const B = [400,500,600];
const C = […A,…B];
In the above example, as we can see, the three dots are mentioned before the name of each variable when we want each of the variables to represent the elements that it stores. A contains the numbers 100,200,300 and to represent all the three numbers, we just mention it as …A and for numbers contained in B, we mention it as …B respectively.
The Spread Operator also be used with Objects as illustrated in the example below.
const myCat = {
breed: "Munchkin",
age:1,
color: "Ginger"
}
const updateMyCat = {
gender: "female",
country: "USA",
}
const updatedInfo ={...myCat,...updateMyCat};
In the above example, the two objects myCat and updateMyCat are copied quickly into the object updatedInfo , by using the three dots as shown above.
In the object above, as we notice, the spread syntax follows the properties of the object and adds the key-value pairs (the keys being breed, age, color, gender, country and their respective values being “Munchkin”, 1, “Ginger”, “female”, ”USA”) to the object being created, that is, updatedInfo. The key-value pairs that are copied are then spread out or expanded in the updatedInfo object as seen above in the outcome.
CONCLUSION
To conclude, even though Spread syntax and rest syntax are both represented by using the three dots, we observe from above examples that they operate in an opposite manner.
Spread syntax “expands” or “spreads out” or “unfolds” the items contained in an array or object into separate items or elements, whereas the Rest syntax collects multiple items and “contracts” or “reduces” or “folds” the separate items into a compact array.
To conclude in one line, the spread syntax unwraps or opens up the items that are covered or closed and the rest syntax wraps or containerize items that are open or spread out.
You are welcome to add your opinions or suggestions for identifying the difference between the spread operator and the rest operator.