Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Use Unlimited Arguments in a JavaScript Function
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.
2K+ Views
