In this section, we will learn what the Rest operator is and how to use it in JavaScript.
What is Rest Parameter in JavaScript?
A function is carefree about the number of inputs we set as its argument.
This means if a function has only one parameter but we set more arguments for it when calling the function, it doesn’t have any problem with that.
Now the question is how can we receive all the arguments of a function if we set only one parameter for that function and called with a random number of arguments?
This is where the rest parameter comes in handy.
Basically, a rest parameter is an array that will hold all the arguments that we set for a function when calling it.
How to Declare Rest Operator in Java? (JavaScript Rest Operator Syntax)
The rest parameter is essentially a parameter with an ellipsis on the left side of it.
For example:
function funcOne(name = "John", ...arg)
Here, the first parameter is a usual parameter with a default value.
But the second parameter is a rest parameter.
This rest-parameter then treated as a local variable that points to an array in the target function. (Note that the array contains the arguments that we’ve passed to the function).
Example: creating JavaScript functions with rest operator
function funcOne(name = "John", ...arg){
console.log(name);
console.log(arg);
}
funcOne();
funcOne("Omid", "Jack","John",20,30,true);
Output:
John [] Omid ["Jack", "John", 20, 30, true]
Here the signature of the function is:
function funcOne(name = "John", ...arg)
The function has one usual parameter called `name` that has a default value.
Also, it has a rest parameter called `arg`.
Now the first time we called the function this way:
funcOne();
Here, because we didn’t send any argument to the function, the first parameter of the function will have the default value. This means `name` parameter will have the value “John”.
The second parameter of the function (the rest parameter) will be an empty array.
For this reason, when the body of the function ran, the first call to the `console.log(name);` statement sent the value `John` to the browsers console.
And the second call to the `console.log(arg);` statement sent an empty array to the browser’s console.
Now the second time we called the function like this:
funcOne("Omid", "Jack","John",20,30,true);
Here, the first argument `Omid` is set as the value of the first parameter of the function.
The rest of arguments, however, are sent to the `rest parameter` of the function which is `arg`.
So now the `arg` parameter points to an array that has these values:
["Jack", "John", 20,30,true];
Now when the execution engine ran the body of the `funcOe()` function with these arguments, the two calls to the browser’s console output these two messages:
Omid ["Jack", "John", 20, 30, true]
Note: The rest parameter is basically an array and so it has the access to all the methods of the array types.
JavaScript Rest Operator Notes:
Notes:
- Arrays are covered in later sections, but in short, it’s a memory location that can store multiple values of the same or different types.
For example:
var arg = [1,2,3,4,5,6,null, “Jack”, 10] is an example of an array variable.
- In a function, there can be ONLY one rest parameter.
- A rest parameter appears ONLY as the last parameter of a function.
- If a function has multiple usual parameters and one rest parameter at the end, when calling that function and setting arguments for that function:
The first argument will be stored in the first parameter, the second argument to the second parameter and so on until all the usual parameters are filled with a value.
After that, if there are still arguments, they all will be stored as the elements of the rest parameter of the function.
The example below will use a method that comes from arrays. So if you’re not familiar with arrays yet, don’t worry because you’ll see such an example in later sections and will be explained to you when we fully covered the arrays topic.
Example: rest parameter in JavaScript
function funcOne(name = "John", ...arguments){
console.log(name);
arguments.forEach(value=> console.log(`The value is: ${value}`));
}
funcOne();
funcOne("Omid", "Jack","John",20,30,true);
Output:
John Omid The value is: Jack The value is: John The value is: 20 The value is: 30 The value is: true
The purpose of this example was to show you that the `rest parameter` is truly an array because, as you can see, using the `arguments` parameter, we’ve used the methods that are designed for array objects.
JavaScript Arguments variable
In the body of each function, there’s a built-in local variable called `arguments`.
This variable points to an array-like object! We say “array-like” because the target object is not actually an array object but because it has a property called “length” that contains the number of elements in its body and its keys are of type number and start from the value 0 and beyond, for this reason, we call them array-like object.
But this object does not have those methods available in arrays like `forEach()`, `map()` etc. and that’s why it is not fully considered as an array.
Before the dawn of the `rest parameter` we’ve used the arguments object to access those additional arguments that a function might take. But now that we have the rest parameter, it should be used instead whenever there’s a possibility of additional arguments for a function.
Because the rest parameter is truly an array and gives us the access to those array-related methods.
Example: using arguments variable in JavaScript
function funcOne(name = "John"){
console.log(name);
for(let i = 0; i<arguments.length; i++){
console.log(arguments[i]);
}
}
funcOne();
funcOne("Omid", "Jack","John",20,30,true);
Output:
John Omid Omid Jack John 20 30 true
