JavaScript Rest parameters Tutorial

JavaScript

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

<!DOCTYPE html>
<html>
<head>
<title>JavaScript is fun! :)</title>
</head>
<body>
<p id="output"></p>
<script type="text/javascript">
function funcOne(name = "John", ...arg){
console.log(name);
console.log(arg);
}
funcOne();
funcOne("Omid", "Jack","John",20,30,true);
</script>
</body>
</html>
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 example in later sections and will be explained to you when we fully covered arrays topic.

Example: rest parameter in JavaScript

<!DOCTYPE html>
<html>
<head>
<title>JavaScript is fun! :)</title>
</head>
<body>
<p id="output"></p>
<script type="text/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);
</script>
</body>
</html>
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 took. 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

<!DOCTYPE html>
<html>
<head>
<title>JavaScript is fun! :)</title>
</head>
<body>
<p id="output"></p>
<script type="text/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);
</script>
</body>
</html>
Output:
John
 Omid
 Omid
 Jack
 John
 20
 30
 true