How to use unlimited arguments in a JavaScript function?

Javascript Web Development Front End Technology

In this tutorial, let us discuss the methods to use unlimited arguments in a JavaScript function.

The number of arguments in a JavaScript function is a bit tricky. If we specify three arguments should follow the correct order of the arguments. Let us discover the solution to this problem by introducing the methods to pass unlimited in a function, we can not pass more than three. Moreover, we arguments to a JavaScript function.

Using ES5 Arguments Object

Instead of converting the arguments object to an array, we can process the arguments object with the total number of arguments.

Follow the syntax below to use this method.

Syntax

function add(args1, args2)
{
   var actualArgs = add.length;
   var totArgs = arguments.length;
   var argObj = add.arguments;
}
add(1,2,3)

The syntax snippet describes the actual function arguments and the total number of arguments. The actual arguments are two, and the real arguments are three in this code snippet.

Parameters

args1 − It is the first argument.
args2 − It is the second argument.

Example

In this example, we define a function with three arguments. Then we pass seven arguments to the function. The function displays the total arguments by processing the arguments object.


<html>
<body>
   <h2>Unlimited function arguments using <i> the arguments object only</i></h2>
   <div id = "argObjBtnWrap">
      <p><b> Input: </b> Violet, Indigo, Blue, Green, Yellow, Orange, Red</p>
      <p>Click the button to see the details of the arguments</p>
      <button onclick = 'argFunction("Violet", "Indigo", "Blue", "Green", "Yellow", "Orange", "Red")'>Click Me</button>
   </div>
   <div id = "argObj"></div>
   <script>
      function argFunction(arg1, arg2, arg3)
      {
         var argObjBtnWrap = document.getElementById("argObjBtnWrap");
         var argObjOp = document.getElementById("argObj");
         var argObjStr = "";

         //argObjBtnWrap.style.display = "none";
         argObjStr += "Function Argument = " + argFunction.length;
         argObjStr += " <br> ";
         argObjStr += "Total Arguments = " + arguments.length;
         argObjStr += " <br> ";
         argObjStr += "Arguments are, <br><br>"
         for (i = 0; i < arguments.length; i++) {
            argObjStr += argFunction.arguments[i] + " ";
         }
         argObj.innerHTML = argObjStr;
      }
   </script>
</body>
</html>

Using ES5 Arguments Object as an Array

The arguments object is a kind of array that contains the total number of arguments to a function. There are two disadvantages to this method. Because it is not an array, we can not use forEach and map functions. Next, we can not use the arrow syntax. If we need to convert it to an array, we need to use the Array.from() method.

Syntax

function add() {
   const argsArr = Array.from(arguments);
   return argsArr.reduce((total, current) => total + current);
}

Here, the arguments array gives all the arguments. The reduce function and the arrow function add the arguments.

Example

In this example, we perform the multiplication of multiple numbers. We will convert the “arguments” object to an array and process it with the reduce function to do the multiplication of multiple numbers.


<html>
<head>
   <script type = "text/javascript">
      function getArgSynt()
      {
         var argSyntBtnWrap = document.getElementById("argSyntBtnWrap");
         var argSyntOp = document.getElementById("argSynt");
         var argSyntStr = "";
         function argSyntMult() {
            const args = Array.from(arguments);
            return args.reduce((total, current) => total * current);
         }
         //argSyntBtnWrap.style.display = "none";
         argSyntStr += "100 × 200 = <b>" + argSyntMult(100, 200)
         + "</b> <br> <br>";
         argSyntStr += "100 × 200 × 300 = <b>" + argSyntMult(100, 200, 300)
         + "</b> <br> <br>";
         argSynt.innerHTML = argSyntStr;
      }
   </script>
</head>
<body>
   <h2>Unlimited function arguments using <i>the arguments object as an array</i></h2>
   <div id = "argSyntBtnWrap"
      <p>Product of 100, 200</p>
      <p>Product of 100, 200, 300</p>
      <p>Click the button to see the result</p>
      <button onclick = "getArgSynt()">Click Me</button>
   </div>
   <div id = "argSynt"> </div>
</body>
</html>

Using the Spread Operator or Rest Parameter Syntax

We can use the rest parameter syntax of ES6 to use unlimited arguments. The syntax is simple and easy. It is an array that accepts multiple parameters.

Syntax

Following is the syntax to use unlimited arguments usig the spread operator −

function f(a, b, ...theArgs) {
   // …
}

Here, we can pass multiple arguments.

Parameters

a − It is the first argument.
b − It is the second argument.
theArgs − It is an array that contains all arguments.

Example

In this example, we perform the sum of multiple numbers. We use the spread operator to do this operation.


<html>
<head>
   <script type = "text/javascript">
      function getResOp()
      {
         var resOpBtnWrap = document.getElementById("resOpBtnWrap");
         var resOp = document.getElementById("resOp");
         var resOpStr = "";
         function add(...theArgs)
         {
            let sum = 0;
            for (const arg of theArgs)
            {
               sum += arg;
            }
            return sum;
         }

         //resOpBtnWrap.style.display = "none";
         resOpStr += "10 + 20 + 30 = <b>"
         + add(10, 20, 30) + "</b><br><br>";
         resOpStr += "10 + 20 + 30 + 40 + 50 = <b>"
         + add(10, 20, 30, 40, 50) + "</b> <br> <br>";
         resOp.innerHTML = resOpStr;
      }
   </script>
</head>
<body>
   <h2>Unlimited function arguments using <i>the rest parameter syntax</i></h2>
   <div id = "resOpBtnWrap">
      <p>Sum of 10, 20, 30<p>
      <p>Sum of 10, 20, 30, 40, 50</p>
      <p>Click the button to see the result</p>
      <button onclick = "getResOp()">Click Me</button>
   </div>
   <div id = "resOp"> </div>
</body>
</html>

In this tutorial, we learned the two methods to use multiple arguments in a function. The first method uses the spread operator, and the second uses the arguments object. The spread operator method is easy because we need to write more code to process the arguments object.