Wednesday, 10 March, 2021 UTC
Summary
This article explains rest parameters in JavaScript, which allow you to pass either a smaller number of arguments or a greater number of arguments than the formal parameter specified. Rest parameters are an array object, always represented as the last formal argument of the function.
To understand rest parameters in JavaScript, let’s start with creating a function to add two numbers.
function addNumbers(num1, num2) {
let res = num1 + num2;
return res;
}
let result = addNumbers(7, 2);
console.log(result); // 9
The above function takes two input arguments and returns the addition of passed arguments. So, if you pass two numbers, the addNumbers function would return the sum of those two numbers.
However, by design all JavaScript functions are overloaded, which means you can pass:
- Extra arguments to the function
- Fewer numbers of arguments to the function
In the definition of the overloaded function, you can ignore types, as JavaScript is a type-less language. Let’s pass fewer arguments to the addNumbers function:
function addNumbers(num1, num2) {
let res = num1 + num2; // 7 + undefined
return res;
}
let result = addNumbers(7);
console.log(result); // NaN
As you see, JavaScript does not complain about fewer arguments and returns NaN as a result. Next, pass more arguments to the addNumbers function:
function addNumbers(num1, num2) {
let res = num1 + num2;
return res;
}
let result = addNumbers(7, 2, 4, 9, 1, 6);
console.log(result); // 9
Once again, JavaScript does not complain about extra arguments, and it assigns the first two arguments to num1 and num2 and returns the addition of them.
Now, you may have a couple of questions regarding extra arguments to the function:
- Does JavaScript ignore extra arguments?
- Is there any way to access extra arguments inside the function?
The answer to the above questions is rest parameters. JavaScript does not ignore the extra arguments and represents them inside the function using the rest parameters.
Rest parameters represent an unknown number of arguments as an array inside the function.
Some characteristics of the rest parameters are:
Some characteristics of the rest parameters are:
•It represents the extra arguments passed in the function.
•It is always defined as the last formal parameter of the function.
•It is always prefixed with three dots. A rest parameter with name “foo” is represented by …foo.
•It is always defined as the last formal parameter of the function.
•It is always prefixed with three dots. A rest parameter with name “foo” is represented by …foo.
In the addNumbers function, a rest parameter can be added as shown next in the next code listing:
function addNumbers(num1, num2, ...ep) {
console.log(ep.length); // 4
let res = num1 + num2;
return res;
}
let result = addNumbers(7, 2, 4, 9, 1, 6);
console.log(result); // 9
Now, the addNumbers function has a rest parameter with name ep. You can give any name to the rest parameter. As the rest parameters represent extra arguments passed to the function, you get 4 as the output on printing the length of it.
The rest parameter is an ** array object**, which means you can perform operations such as push, pop, length, sort, map, etc. You can perform various array operations on the rest parameter as shown in the next code listing:
function addNumbers(num1, num2, ...ep) {
console.log(ep.length); // 4
ep.push(9);
ep[0] = 10;
console.log(ep.length); // 5
console.log(ep.sort()); // [1,10,6,9,9]
let res = num1 + num2;
return res;
}
let result = addNumbers(7, 2, 4, 9, 1, 6);
console.log(result); // 9
One important thing you should keep in mind is that the rest parameter must always be the last formal parameter of the function. The code listed below throws an error:
function addNumbers(num1,...ep,num2){
let res = num1+ num2;
return res;
}
For the above function, JavaScript should throw an error that the Rest parameter must be the last formal parameter.
You can use the normal parameter and rest parameter together to achieve any particular requirement. In the next example, the function multiplies all the extra parameters with the formal parameter and returns the array.
function multiplyNumbers(num, ...ep) {
let res = ep.map(e => {
return num * e;
});
return res;
}
let result = multiplyNumbers(7, 2, 4, 9, 1, 6);
console.log(result); // [14,18,63,7,42]
Besides rest parameters, you can also use the arguments object to work with extra arguments passed to a function. Each time you call a function, JavaScript passes the arguments object in it.
function addNumbers(num1,num2){
console.log(arguments.length); // 5
let res = num1+ num2;
return res;
}
let res = addNumbers(7,5,8,9,2);
Unlike rest parameters, the arguments object contains all arguments passed to the function—that is why you are getting 5 on printing the length of the arguments object. Some of the significant differences between rest parameters and the arguments object are as follows:
- Rest parameters represent the unknown number of arguments inside the function, whereas the arguments object represents all arguments passed to the function.
- Rest parameters are pure array, whereas the arguments object is not a real array.
- Since rest parameters are instance of an array, methods such as sort, pop, push, etc. can be applied to that. However, applying these methods on the arguments object throws an error.
So, for the following code, JavaScript will throw an error:
function addNumbers(num1,num2){
console.log(arguments.length); // 5
arguments.sort();
arguments.pop();
let res = num1+ num2;
return res;
}
let res = addNumbers(7,5,8,9,2);
In Nested Functions
Each function has its own arguments object, so if you want to access the arguments object of the parent function inside a child function, it is not directly possible. As you see in the code listed below, the display function and addNumbers function both have an arguments object.
function addNumbers(num1,num2){
console.log(arguments.length); // 5
console.log(arguments[0]); // 7
function display(){
// display function has its own arguments object
console.log(arguments.length); //2
console.log(arguments[0]); //1
}
display(1,9);
}
let res = addNumbers(7,5,8,9,2);
However, a child function can directly access the rest parameter of the parent function, as shown in the code listed below:
function addNumbers(num1,num2,...ep){
console.log(ep.length); // 3
function display(){
console.log(ep.length); //3
}
display(1,9);
}
let res = addNumbers(7,5,8,9,2);
So, when it comes to working with nested functions, rest parameters are a better option than an arguments object.
Summary
In summary, you should know the following points about rest parameters:
- They represent the extra arguments passed in the function inside an array.
- They are always defined as the last formal parameter of the function and prefixed with three dots.
- All the array operations such as push, pop, map, sort, length, etc. can be performed on rest parameters.
I hope you find this article useful. Thanks for reading.