Triple Dots of JavaScript : Spread vs Rest

...args

The above three dots followed by any variable name (here: args) is what is called the Spread operator, and the same three dots followed by any variable name (here: args) is also called the Rest operator.

In 2015, ES6 introduced two great features which improves the ability to handle function parameters and arrays quite easily. These are the Spread operator and the Rest parameter. Though the spread operator and the rest parameter look quite the same, their functionalities are quite different.

So what’s the difference between them?
Let’s gulp in things one at a time starting with what a Spread Operator is.

The Spread operator allows an object that is capable of returning its elements one at a time to expand in places where more than one argument is expected.
It is mostly used in an array where more than 1 value is expected.
As the name suggests, it is used to “Spread” the values contained in an object (or an array) into another array.

Let’s understand this with an example:

let a = ["the", "Butter"];
let b = ["the", "Jam"];
console.log(["Spread",...a]);
console.log(["Spread",...b]);
console.log(["Spread",...a, "and",...b]);

The above code gives the following output:

[“Spread” , “the” , “Butter”]
[“Spread” , “the” , “Jam”]
[“Spread” , “the” , “Butter” , “and” , “the” , “Jam”]

Just like in the above example, we can also spread the properties of an object into another object as shown in the example below.

let oldObj = {oldData: "old data"}
console.log({
...oldObj, 
newData:"new data" 
})

This gives the output as follows:

{oldData:"old data", newData:"new data"}

The main purpose of a spread operator is to expand array elements or an object's property.

Thus, what the spread operator actually does is that it pulls out the values from an existing array(or an object) and “Spreads” / adds it to another new array (or an object). It’s like cloning an array/object into another array/object.

On the other hand,

Rest parameter is an improved way to handle function parameter, allowing us to more easily handle various input as parameters in a function. The rest parameter syntax allows us to represent an indefinite number of arguments as an array. With the help of rest parameter a function can be called with any number of arguments, no matter how it was defined.

Let us understand this with an example:

function sumNos(...args){
    sum=0;
        for(let i of args){
        sum+=i
          }
        return sum
}
console.log('The sum of the parameters passed is:', sumNos(1, 2, 3))
console.log('The sum of the parameters passed is:', sumNos(1, 2)) 
console.log('The sum of the parameters passed is:', sumNos(1, 2, 3, 4, 5, 6))

The above example gives us the following output:

The sum of the parameters passed is: 6
The sum of the parameters passed is: 3 
The sum of the parameters passed is: 21

Thus, it is clearly evident from the above example that the function sumNos can take any number of inputs as its parameter and then loops through each of its element, adds it, and returns the sum.
It’s like an array of elements of indefinite size, being passed on to a function as its parameter.

Summary:
In short, The spread operator allows us to expand an iterable like array into its individual elements whereas The rest parameter allows us to pass an indefinite number of parameters to a function and access them in an array.

Here are some of the best resources for you to learn more about them:

1. Spread and REST operators in Javascript

2. ...spread operator and rest operator - Beau teaches JavaScript
   

3. Spread syntax Documentation from Mozilla Docs

4. Rest Parameters Documentation from Mozilla Docs

Thanks for Reading!

Connect with me:

• Twitter
• LinkedIn