JavaScript ES6 - Spread Operator And Rest Parameter

JavaScript ES6 provides a new syntax represented by the "..." token which can be used as a spread operator and/or rest parameter. Knowing the difference between them gives you the confidence to when and where to use this token. Thus, that is what we are going to discuss in this post.

The Spread operator

 

In ES6, a spread operator is represented by the “…” token without the quotes. It splits an iterable object into its individual values. For now, just bear in mind that a good example of an iterable object is an array.

 

To give a background, let’s try to see the old way of JavaScript that uses the concept of spread operator.

 

Let us see an example below.

function myFunc(arg1, arg2, arg3, arg4){
    return arg1 + arg2 + arg3 + arg4;
}

var myArgs = [1,2,3,4];
var result = myFunc.apply(null, myArgs);
console.log(result); //output 10

ES6 provides an easy way to the example above, via the spread operator. Again, let us see an example below. 

function myFunc(arg1, arg2, arg3, arg4){
    return arg1 + arg2 + arg3 + arg4;
}

let myArgs = [1,2,3,4];
let result = myFunc(...myArgs);
console.log(result); //output 10

Isn't that nice? Now, to give you an idea of what's happening at runtime. Before JavaScript interpreter calls the myFunc function, it actually replaces ...myArgs with the 1,2,3,4 expression. You might be thinking, isn't the spread operator calls the apply() method. To answer that question, the JavaScript runtime doesn't call the apply method but the behavior is the same.

 

Other ways to use the spread operator

 

Making the array values as part of another array

 

Before ES6 there are probably a lot of ways to do this but today it's so simple. See the example below.

let myFruits = ['apple', 'avocado', 'pineapple'];
let anotherFruits = ['chico', ...myFruits];
console.log(anotherFruits); //output [chico, apple, avocado, pineapple]

Pushing the values of an array into another array

 

Before I tended to loop through an array and then push each item. In ES6 you no longer need to do that. Let us see an example below. 

let dcSuperHeroes = ['Superman', 'Batman', 'Flash'];
let marvelSuperHeroes = ['Ironman'];
let superHeroes = [];
superHeroes.push(...dcSuperHeroes);
console.log(superHeroes); //["Superman", "Batman", "Flash"]
superHeroes.push(...marvelSuperHeroes);
console.log(superHeroes);//["Superman", "Batman", "Flash", "Ironman"]

Spreading multiple arrays

 

If you want to spread an array into multiple different arrays, see the example below. 

let dcSuperHeroes = ['Superman', 'Batman', 'Flash'];
let marvelSuperHeroes = ['Ironman'];
let japaneseSuperHeroes = ['Ultraman', 'Kamen Rider'];
let superHeroes = [...dcSuperHeroes, ...marvelSuperHeroes, ...['Son Goku', 'Gohan', 'Vegeta'], ...japaneseSuperHeroes];
console.log(superHeroes);
//output ["Superman", "Batman", "Flash", "Ironman", "Son Goku", "Gohan", "Vegeta", "Ultraman", "Kamen Rider"]

The Rest parameter

 

The rest parameter is also represented by the "..." token. If you have seen a function having a last parameter prefixed with "..." it is called a rest parameter. Another thing, a rest parameter is an array type. Lastly, it contains the rest of the parameters of a function, when the number of arguments exceeded the number of named parameters.  

 

Before looking at the rest parameter example, let's try to see an example of how it is done without using the rest parameter.

function myFunc(a,b){

    var const_ArgsLen = 2,
        len = arguments.length;

    if(len > const_ArgsLen){

        var extraArguments = Array.prototype.slice.call(arguments, 2, len);

        console.log(extraArguments); //output [3, 4, 5, 6]
    }
}
myFunc(1, 2,3, 4,5,6);

As you can see, programmers before use the arguments objects of a function to retrieve the extra arguments that were passed to the function.

 

In ES6, this can be done in a much easier way. See the example below.

function myFunc(a,b, ...args){
    console.log(args); //output [3, 4, 5, 6]
  }
  myFunc(1, 2,3, 4,5,6);

Summary

 

In this blog post, we have discussed the spread and rest operator. I hope you have enjoyed this blog post, as much I have enjoyed writing and coding the examples. Until next time, happy programming.