Easy JavaScript Part 2: What is the Rest Parameter in a Function?

Dhananjay Kumar / Tuesday, July 25, 2017

A JavaScript function can take any number of parameters. Unlike other languages like C# and Java, you can pass any number of parameters while calling a JavaScript function. JavaScript functions allows unknown number of function parameters. Before ECMAScript 6, JavaScript had arguments variable to access these unknown or variable number of parameters, which is an array-like object but not an array. Consider this code listing to understand the arguments variable:

function add(){
 
     var result = 0; 
     for(let i=0;i<arguments.length;i++){
         result = result + arguments[i];
     }
     return result; 
 }
 
 var r = add(6,9,3,2);
 console.log(r);
 var t = add(7,56,9);
 console.log(t);

As you see, that arguments object is used to access unknown or variable function parameters. Even though arguments uses length property and square brackets, it is not a real JavaScript array. You cannot use other JavaScript array methods like pop, push, slice etc. with the arguments object. Some of the problems in using arguments are:

JavaScript function arguments object is not a real JavaScript array; therefore, you cannot use other array methods like pop, push, slice, etc. with it
It is difficult to access arguments object of outer function in an inner function. To use it, you need to assign outer function arguments object in a variable, and then use it in an inner function
If you want to use arguments object as an array, then you need to convert it manually using Aarry.prototype.slice

ECMAScript 6 introduces a new feature, Rest Parameters, which represents an unknown number of parameters as an array in a function. It not only represents extra parameters as an array, it also solves many of the problems of the arguments object. Let us rewrite the above add function using the rest parameters.

function add(...theArgs){
 
     var result = 0; 
     for(let i=0;i<theArgs.length;i++){
         result = result + theArgs[i];
     }
     return result; 
 }
 
 var r = add(6,9,3,2);
 console.log(r);
 var t = add(7,56,9);
 console.log(t);

You can define a rest parameter as …theArgs or …args. If the last named function parameter is prefixed with … (three dots), It becomes rest parameter of the function. JavaScript function’s rest parameters are pure JavaScript array. In the above code listing, …theargs is the rest parameter of the function add because it is the only named parameter, and it is also prefixed with … (three dots). Since, rest parameter is a JavaScript array; you can perform operations such as push, pop, etc. on rest parameter theArgs as shown in the code listing below:

function add(...theArgs){
 
     theArgs.push(10);
     var result = 0; 
     for(let i=0;i<theArgs.length;i++){
         result = result + theArgs[i];
     }
     var lastItem  = theArgs.pop();
     console.log(lastItem);
     return result; 
 }

JavaScript function’s rest parameters can work with other parameters also. You may need other named parameters in your function, if you do not want to include particular parameters in a rest parameter array. Let us consider next code listing,

function add(num1, num2, ...theArgs){
 
     console.log(num1);
     console.log(num2);
     console.log(theArgs.length);
    
 }
 var r = add(6,9,3,2);
 var t = add(7,56,9);

For a first time function call, 6 and 9 will be assigned to num1 and num2 respectively. For second time function call, 7 and 56 will assigned to num1 and num2. Parameters starting third parameter will assigned to rest parameter array. Keep in mind that first two parameters will not become part of the rest parameter array. So, if not all values should be included in the parameter, you should define those as comma separated named parameter in the beginning. Below listed code will give you error,

function add(num1, ...theArgs,num2){
 
     console.log(num1);
     console.log(num2);
     console.log(theArgs.length);
    
 }

In above code listing, rest parameter is not the last parameter, so JavaScript will throw error, that Rest parameter must be last formal parameter.

JavaScript allows you to destruct rest parameters, which means that you can unpack rest variable data into a distinct variable name. Let us consider below code listing:

function add(...[a,b,c]){
 
     return a+b+c; 
    
 }
 var r = add(6);
 console.log(r);
 var t = add(7,56,9);
 console.log(t);

For a first-time function call a=6 , b= undefined, c = undefined will be assigned, and for the second-time function call a=7, b=56, c=9 will be assigned. In this case, If you pass any extra parameter then that will be ignored in the function.

JavaScript function’s rest parameter is great improvement over arguments object to work with unknown parameters of the function. It is pure JavaScript array; hence, you can use all array methods with it. You can unpack rest variable data to named variables. You can give any name to the rest parameters, which is again a major improvement over always using arguments keyword.

In the next post of this "Easy JavaScript" series, you will learn about default parameters in JavaScript functions. You can learn in detail about these topics at the ECMA International site. Also, do not forget to check out Ignite UI, which you can use with HTML5, Angular, React, or ASP.NET MVC to create rich Internet applications.