How to define rest parameter for a function in JavaScript?

Javascript Web Development Front End Technology

In this tutorial, we will learn how can we define and use the rest parameter for a function in JavaScript. Rest parameter allows us to use the function as the variadic function means the function which is declared with variable (not fixed) number of arguments.

The rest parameter is the parameter which allows us to use n number of arguments in JavaScript by declaring just one while defining a function. A function created with the rest parameter than later in the code it can change the number of arguments it accepts according to the demand of the code.

Syntax

Syntax to define a rest parameter for a function in JavaScript −

function function_name (…rest_parameter) {
   statements; //Function body
}

The use of operator (…) allows us to declare a rest parameter in a function. A rest parameter is nothing, but an indefinite array defined which can be used later according to our requirements.

Syntax to define a rest parameter with other parameters also present in the function −

function function_name (param1, param2, …rest_parameter) {
   statements; //Function body
}

So, we can say the rest parameter is always declared as the last parameter of the function.

Let’s see some examples for a better understanding and use of rest parameters −

Function with only rest parameter

Steps to declare a function with rest parameter −

Create a function named as addition also declare one rest parameter in it.
Now declare one variable ‘add’ initialized with zero.
Create a for loop running over the rest parameter.
In the for loop perform the addition operation on all the number looping and save it on the ‘add’ variable.
Now call the function with 2 variables.
Call the function again but this time with 4 variables.

Example

We can use the below code to define rest parameter in JavaScript −

<!DOCTYPE html>
<html>
<body>
   <h1>Tutorials Point</h1>
   <p>Rest parameter in JavaScript</p>
   <p id="res1"></p>
   <p id="res2"></p>
   <script>
      function addition(...num){ 
         let add = 0;
         for(let i of num){ 
            add+=i;
         }
      return add;
      }
      result1 = addition(3,6); 
      result2 = addition(2,4,6,8);
      document.getElementById("res1").innerHTML = result1;
      document.getElementById("res2").innerHTML = result2;
   </script>
</body>
</html>

As we can see in the above code when we call function with 2 variables it gives us sum of two variables and if we give four variables it will provide us the sum of 4 variables so using it we can find sum of n number of parameters without pre defining it.

Function using other parameters also with rest parameters

Step 1 − Declare a function named as test with 3 normal and 1 rest parameter declared inside it.
Step 2 − Now we print various values of the parameters of the function with using different-different array functionalities like the below −
- Print array.length
- Print just the rest parameter
- Print the second element of array.
- Print the sorted array.
Step 3 − Now call the function check with all the values declared in it.

Example

We can use the below code to define a with function which contain other parameters also including rest parameter −

<!DOCTYPE html>
<html>
<body>
   <h1> Tutorials Point </h1>
   <p> Rest parameter in JavaScript </p>
   <script>
      function check(a,b,c,...d){ 
         document.write(a+"</br>")
         document.write(d+"</br>") 
         document.write(d.length+"</br>") 
         document.write(d[1]+"</br>") 
         document.write(d.sort()+"</br>")
      }
      check (50,28,12,36,29,91,74)
   </script>
</body>
</html>

As we can see in this example, we are using the rest parameter as an array and applying various methods of array on it like length, sort and many more. In above example we declare the function with 4 arguments and call it with 7 values so the first 3 values are assigned normally to a, b, and c but the last 4 values are assigned as an array to the last rest parameter.

As in the above example we have declared 4 variables in the function but if by chance at the time of function calling, we call it with only 3 or 4 values than the rest parameter value will be shown as an empty array.

Note − The rest parameter is always defined as the last parameter of the function we cannot define it in the middle of two normal parameters or as the first parameter of the function.