Rest parameter in JavaScript

The Rest parameter is used to represent any number of arguments in a function.

Let us have a look at how a rest parameter used in a function.


function foo(...everyArgs){
    console.log(everyArgs);
}

foo(1,2);
//output: [1,2]

foo(1,2,3);
//output: [1,2,3]

foo(1,2,3,4,5);
//output: [1,2,3,4,5]
                    

In function foo, we have passed a different number of arguments to function foo. In function foo definition, we have used the rest parameter .... So everyArgs will have every arguments as an array.

Let us have a look at more examples.


function foo(a,b,...c){
    console.log(a);
    console.log(b);
    console.log(c);
}

foo(1,2);
//output: 1
//        2
//        []

foo(1);
//output: 1
//        undefined
//        []

foo(1,2,3,4,5);
//output: 1
//        2
//        [3,4,5]
                    

From the above code, you should have understood the rest parameter.

Difference between arguments object and rest parameter

There is two main difference between the arguments object and rest parameter.

  • The Rest parameter is defined in the parameters of function while the arguments object is not defined anywhere in the function. You can directly access arguments object in function.
  • The Rest parameter may or may not contain all the parameters of the function ( take a look at first and second example ) while the arguments object contains every arguments of the function.
  • Small difference: Rest parameter is a real array of arguments while the arguments object is not an array. It is a special object ( which looks like an array ).

Rest parameter in Destructuring Assignment

The Rest parameter can be used with the Destructuring assignment. Let us have a look at an example.


var [bestCar, ...otherCars] = ["BMW","TOYOTA","MARUTI", "TRUCK", "JEEP"];
console.log(besCar); // output: "BMW"
console.log(otherCars); // output: ["TOYOTA","MARUTI", "TRUCK", "JEEP"]

var [a,b,...c] = [1,2];
//check what is the value of c?              
                    

Destructuring rest parameter

Rest parameter can be destructured but array only. Let us have a look at an example.


function foo(...[a,b,c]){
    console.log(a);
    console.log(b);
    console.log(c);
}            

foo(1);
//output: 1
//        undefined
//        undefined

foo(1,2,3);
//output: 1
//        2
//        3

foo(1,2,3,4); //more than 3 arguments will be ignored
//output: 1
//        2
//        3

function foo1(a,b,...[d,e,f]){
    console.log(a);
    console.log(b);
    console.log(d);
    console.log(e);
    console.log(f);
}
// more than 5 arguments will be ignored
                    

Destructuring rest parameter should be used when you want to work with fix or less number of arguments. Like in foo function, 4th argument will be ignored. And in foo1 function 6th and more arguments will be ignored.

Conclusion

In this section, we learned about rest parameter in JavaScript.
In next section, you will learn about if..else and switch in JavaScript.