Rest Operator

The JavaScript ES6 Rest operator allow us to pass the any number of argument to the function or represent an indefinite number of argument as an array.

Rest Operator Syntax:

function function_name(...args){

}

The JavaScript ES6 comes with new operator, that is three dots (…) which is useful to create the Rest operator and Spread operator.

Main Points:

• Rest Operator create the array of an arguments.
• Rest Operator create by the three dots (…) by adding before the argument name. for e.g: …args
• Rest Operator is always last argument of the function.
• It create the pure instance of the Array, So we can use the method like sort, map, forEach and many more.
  Function can have the only one rest parameter not more than it and that rest parameter is goes last to the parameter list.

Rest Operator Examples:

function function_name(...args){
        alert(args.length);
}

function_name(); // 0
function_name(1); // 1
function_name(1, 2, 3, "JavaScript Hive"); // 4

Above is simple example that helps you to understand how the rest operator is work. Here first I created the function with one argument that is args, which is prefixed with three dots(…) so that’s argument is called the rest parameter, now it can handle any number of argument.

Let’s create the one another example that will help us to concatenate the multiple string to the single string.

function concatenate(...strings) {
        return strings.join(" ");
}

alert(concatenate("Hello", "James", "Bond!!!")); // Hello James Bond!!!
alert(concatenate("JavaScript", "Hive")); // JavaScript Hive

Above function will join the any number of string to one string.

Let’s create one more function that will help us to sort the any type of array like string array and number array.

function sortArgs(...args) {
        return args.sort();
}

alert(sortArgs(5, 2, 4, 1, 3)); // 1, 2, 3, 4, 5
alert(sortArgs("e", "a", "c", "b", "d")); // a, b, c, d, e

Rest argument function with another parameter

We can also create the another parameter in the function with the rest parameters, but please take note that rest parameter is always goes the last in the function parameters list.

function addition(a, b, ...c) {
        var sum = a + b;

        c.forEach((d) => sum += d);

        return sum;
}

alert(addition(1, 2)); //3
alert(addition(1, 2, 3)); //6
alert(addition(1, 2, 3, 4, 5, 6, 7, 8, 9, 10)); //55

As you see in above example we created some another named argument in function with the rest parameter.

In above example at fist call of addition method we only pass the 2 value for the a and b variable, so here c rest parameter will have no argument to handle, so it’s length will be 0(Zero).

After on the second call of the addition method we pass the 3 argument so here c rest parameter have only one argument that is “3”, because the first 2 parameter 1 and 2 is taken by respectivly a and b.

And on third call of the addition method we passed the 10 argument, so now c parameter will have the 8 arguments that is 3 to 10.

Rest parameter may or may not be have any arguments. It can hold any number of argument.

Some invalid rest parameter declaration

function function_name(a, b, ...args1, c, d) {
        // SyntaxError: Rest parameter must be last formal parameter
}

function function_name(a, b, ...args1, ...args2) {
        // SyntaxError: Rest parameter must be last formal parameter
}

function function_name(...args1, ...args2, ...args3) {
        // SyntaxError: Rest parameter must be last formal parameter
}

Please take a note that function can have a maximum 1 rest parameter and that parameter always last in the parameter.

We can not limit the maximum number of argument will rest parameter have, If you want to limit that so you have to check manually that how much rest parameter have the argument.

Let’s see the simple example of it.

function addition(...nums) {
        if(nums.length > 3){
                return "Please, Pass the maximum three arguments!!!";
        }

        var sum = 0;

        nums.forEach((a) => sum += a);

        return sum;
}

alert(addition(1, 2, 3)); // 6
alert(addition(1, 2, 3, 4)); // Please, Pass the maximum three arguments!!!
alert(addition(1, 2)); // 3
alert(addition(1)); // 1
alert(addition()); // 0

In above example function will take the maximum three number of argument. If we pass more than three argument than it will return the error message. This above function will take no argument or 1 or 2 or 3 arguments

If you want to also put the constraints like rest parameter must be have the three arguments, not more than it and not less than it so you can also do that.

function addition(...nums) {
        if(nums.length != 3){
                return "Please, give three arguments!!!";
        }
        
        let [a, b, c] = nums;

        return a + b + c;
}

alert(addition(1, 2, 3)); // 6
alert(addition(1, 2, 3, 4)); // Please, give three arguments!!!"
alert(addition(1, 2)); // Please, give three arguments!!!"
alert(addition(1)); // Please, give three arguments!!!"
alert(addition()); // Please, give three arguments!!!"

Difference between rest parameters and the arguments object

• Rest parameters does not create the array of all the argument that passed to the function, It create the array of those argument which haven’t been given a separate name. But arguments object have the all the arguments which passed to the function.
• The arguments object is not the instance of an Array, but rest parameters is an instance of the Array, So we can use the method like sort, map, forEach on the rest parameters.
• The arguments object has additional functionality specific to itself.

Let’s see the example:

function addition() {
  var sum = 0;

 for( i = 0; i < arguments.length; i++){
 sum += arguments[i];
 }

 return sum;
}

function additionES6(...nums) {
 var sum = 0;

 nums.forEach((a) => sum += a );

 return sum;
}

alert(addition(1, 4, 3)); // 8
alert(additionES6(1, 4, 3)); // 8

In above some examples I used the Arrow (=>) Operator, If you want to read about Arrow (=>) Operator, Please click here.

I hope you enjoyed It… Please comment down you reviews about it.

Happy Coding!!!

🙂