Rest Parameters in JavaScript allow us to accept a variable number of arguments as an array. JavaScript introduced this feature in ES6. It is now the preferred way to access the variable number of arguments. Before Rest Parameters, the only way to do this was to use the Arguments object.
Table of Contents
Rest Parameters
We generally use the parameters to access the arguments inside the function. But JavaScript allows us to pass any number of arguments to a function irrespective of the number of parameters it declares.
The following addNum function declares two parameters. But we can invoke it with three or more arguments. JavaScript does not complain. But we cannot access those additional arguments using the existing parameters.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | function addNum(a, b) { return a + b ; } //0 Argument. Both a & b is initialzed as undefined console.log(addNum()); //Nan //1 Argument b is initialzed as undefined console.log(addNum(1)); //Nan //2 Argumnets console.log(addNum(1,2)); //3 //3 Arguments last argument 3 is ignored console.log(addNum(1,2,3)); //3 |
There are two ways using which we can access those additional arguments. One is to use the arguments object and the other is to use the Rest Parameters.
Using Rest Parameter
Rest Parameters in JavaScript lets us store the extra arguments that we supply to the function into an array.
Syntax
The syntax of the Rest Parameters is shown below. We prefix the rest Parameter with ... (three dots) followed by the name of the rest parameter.
1 2 3 4 5 | function f(a, b, ...args) { // … } |
In the above syntax args is the rest parameter, while a & b are normal parameters.
JavaScript assigns the arguments to parameters starting from left to right. First, it assigns the values to the regular parameters a & b. When it encounters a rest parameter it creates an array of all remaining arguments and assigns it to the Rest Parameter i.e. args.
In the following example, fnRest declares args as the rest parameter along with regular parameters a & b. As you can see the first two arguments (1 & 2 ) are mapped in the parameters a & b. The remaining arguments are stored as an array in the rest Parameter args.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | function fnRest(a, b, ...args) { console.log("a", a); console.log("b", b); console.log("args", args); } fnRest(1,2,3,4,5); //Output: //a 1 //b 2 //args [ 3, 4, 5 ] //All addtional arguments are now stored in array |
Even if there is just one extra argument, it will be saved as a single element of an array.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | function fnRest(a, b, ...args) { console.log("a", a); console.log("b", b); console.log("args", args); } fnRest(1,2,3); //Output: //a 1 //b 2 //args [ 3 ] //Array with single element |
If there is no argument provided for the rest parameter, we get an empty array
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | function fnRest(a, b, ...args) { console.log("a", a); console.log("b", b); console.log("args", args); } fnRest(1); //Output: //a 1 //b undefined //args [] //Empty Array |
The Rest Parameters must appear last in the Parameter list.
1 2 3 4 | function f(a, ...restPara, b) //Wrong function f(...restPara,a, b) //Wrong |
There can be only one rest parameter in a function.
1 2 3 | function f(a, b, ...restPara1, ...restPara2) //Wrong |
Rest Parameters Example
The following example nums is a rest parameter. We invoke AddNum many arguments. All of them are captured in the nums array. We then loop through it using for loop and calculate the sum
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | function AddNum(...nums){ let sum = 0; for(let i of nums){ sum+=i; } return sum; } console.log(AddNum(1,2)); // 3 console.log(AddNum(1,2,3)); // 6 console.log(AddNum(1,2,3,4,5)); // 15 console.log(AddNum(1,2,3,4,5,6,7,8,9,10)); // 55 |
Rest Parameter Vs Argument Object
The Argument object is another way to access the arguments in JavaScript. It is available inside every JavaScript function. It contains the values of the arguments passed to that function in an array-like structure. There are some differences between Rest Parameters Vs Arguments Object
The arguments object has an array-like structure but it is not an array. You cannot use array operators like map(), forEach(), sort(), etc on the arguments object. The Rest Parameters are an instance of Array.
The argument object contains all of the arguments. Whereas the rest parameters contain only the extra arguments. It will not contain the parameter which appears before the declaration of the Rest Parameter.
The arguments object is always available in every function (except the Arrow function). We need not do anything to declare them. The Rest Parameters must be explicitly declared.
The arguments object is not available in Arrow functions. We can use Rest Parameters in Arrow functions.
The arguments object has a callee property that returns the reference to the executing function to which the arguments belong. This property is not available in a strict mode. The Rest Parameter does not have that property.
In a non-strict mode, any changes made to the arguments object will also change the parameter ad vice versa. This is not an issue in the rest parameters.
Reference
Read More
