Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Passing unknown number of arguments to a function in Javascript
JavaScript allows functions to accept any number of arguments, even if the function definition specifies a different number of parameters. This flexibility is useful when creating functions that need to handle variable amounts of data.
When defining a function, the variables listed in parentheses are called parameters. When calling the function, the actual values passed are called arguments. JavaScript provides two main approaches to handle unknown numbers of arguments.
Basic Example: Fixed Parameters
Functions with fixed parameters will only use the specified number of arguments, ignoring any extras:
<!DOCTYPE html>
<html>
<head>
<title>Passing Arguments Example</title>
</head>
<body>
<script>
// function with two parameters
function addPara(x, y) {
return x + y;
}
document.write(addPara(5, 3) + '<br>'); // 8
document.write(addPara(5, 3, 2)); // 8 (third argument ignored)
</script>
</body>
</html>
8 8
Using the arguments Object (ES5)
The arguments object is an array-like object available inside all non-arrow functions. It contains all arguments passed to the function, regardless of how many parameters are defined.
Example: Basic arguments Object
<!DOCTYPE html>
<html>
<head>
<title>Arguments Object Example</title>
</head>
<body>
<script>
// function with n number of parameters
function addPara() {
let addNum = 0;
for (let i = 0; i < arguments.length; i++) {
addNum += arguments[i];
}
return addNum;
}
document.write(addPara(5, 10, 15) + '<br>'); // 30
document.write(addPara(10, 20, 30, 40, 50) + '<br>'); // 150
document.write(addPara(10, 20, 10, 20)); // 60
</script>
</body>
</html>
30 150 60
Example: Converting arguments to Array
Since arguments is not a true array, you need to convert it to use array methods like reduce():
<!DOCTYPE html>
<html>
<head>
<title>Arguments with Array Methods</title>
</head>
<body>
<script>
// function with n number of parameters
function addPara() {
let arg = Array.from(arguments);
return arg.reduce(function (acc, cur) {
return acc + cur;
});
}
document.write(addPara(5, 10, 15) + '<br>'); // 30
document.write(addPara(10, 20, 30, 40, 50) + '<br>'); // 150
document.write(addPara(10, 20, 10, 20)); // 60
</script>
</body>
</html>
30 150 60
Using Rest Parameters (ES6)
Rest parameters provide a cleaner, more modern approach. The syntax uses three dots (...) before the parameter name, creating a real array that supports all array methods:
<!DOCTYPE html>
<html>
<head>
<title>Rest Parameters Example</title>
</head>
<body>
<script>
// using rest parameter in ES6
function addPara(...args) {
return args.reduce(function (acc, cur) {
return acc + cur;
});
}
document.write(addPara(5, 10, 5) + '<br>'); // 20
document.write(addPara(10, 20, 10, 20, 30) + '<br>'); // 90
document.write(addPara(10, 20, 10, 20)); // 60
</script>
</body>
</html>
20 90 60
Comparison: arguments vs Rest Parameters
| Feature | arguments Object | Rest Parameters |
|---|---|---|
| Array Methods | Requires conversion with Array.from() | Native array support |
| Arrow Functions | Not available | Works with arrow functions |
| Syntax | Implicit, always available | Explicit with ... syntax |
| ES Version | ES5 | ES6+ |
Conclusion
Rest parameters are the modern, preferred approach for handling variable arguments in JavaScript. They provide cleaner syntax and better functionality than the legacy arguments object, especially when working with array methods.
3K+ Views
