Passing arguments to a function can be pretty tricky, especially when we are not certain about the number of those arguments. In this article, we are going to cover how can we pass unlimited arguments in a JavaScript function in 2 ways.
Number of arguments in a JavaScript function?
By default, we can pass as many arguments as we want, to any function. Usually, we specify those arguments before we use them inside a function. The problem with this approach is the number. If we specify 5 arguments, we can’t use 6. Also, we have to be careful about the order in which we specify arguments.
/**
* Let's create function divide
* and pass two arguments to it
* */
function divide(a,b) {
console.log(a/b);
}
divide(8,2);
// Result:
// 4
divide(8,2,2);
//Result:
// 4
In the example above we have created a function divide() that accepts 2 arguments a,b. When we ran divide(8,2) it returned 4, as expected. But, when we ran divide(8,2,2) it still returned 4. This basically means that our function ignored the third argument. That’s because we never “announced” it when we created the function.
Also, the order of the arguments is super important. We have to pass them to the function in an order in which we have created when we initialized the function.
/**
* Let's create some join function
* that will create name and surname
* */
function fullName(name, surname) {
console.log(`My name is ${name} and surname ${surname}`);
}
fullName('John', 'Doe');
//Result:
// My name is John and surname Doe
fullName('Doe', 'Jane');
//Result:
//My name is Doe and surname Jane
As we can see, the function expected name to be the first and surname to be the second. When we ran fullName('John', 'Doe') we got the expected result. But when we ran fullName('Doe', 'Jane') name and surname were switched, because we switched their places while calling the function.
Unlimited arguments in a JavaScript function using rest operator
With ES6 rest parameters syntax became the way of passing unlimited arguments in a JavaScript function. It is really simple and easy the use. Basically, it is an array of parameters, which allows us to pass unlimited arguments in a JavaScript function.
/**
* Let's create sum function
* that will return sum of all parameters
* */
function sum(...args) {
return args.reduce((total, current) => total + current);
}
console.log(sum(1,2,3));
//Result:
//6
console.log(sum(10,5));
//Result:
//15
console.log(sum(10,10,10,10,10));
//Result:
//50
We created sum() function using rest parameters syntax. Inside of the function we used Array.reduce() method in combination with arrow functions, to sum an unlimited number of arguments.
ES5 arguments syntax
Before ES6 rest parameters syntax, we used arguments object to pass unlimited arguments in a JavaScript function. arguments is an Array-like object accessible inside functions that contains the values of the arguments passed to that function, according to MDN. There are two problems with this approach. The first problem is that it is Array-like, not an array. This means that it has a length property and indexes are zero-based. So, methods like forEach() and map() can’t be used. The second problem is that arguments object doesn’t work with arrow functions.
In order to use arguments object as “real” Array, we have to convert it to one, using from() method.
/**
* Let's create sum function
* that will return sum of all parameters
* */
function sum() {
const args = Array.from(arguments);
return args.reduce((total, current) => total + current);
}
console.log(sum(1,2,3));
//Result:
//6
console.log(sum(10,5));
//Result:
//15
console.log(sum(10,10,10,10,10));
//Result:
//50
In the code snippet above, we have passed no arguments, since we used arguments object to pass unlimited arguments in a JavaScript function. We have created variable args and assigned result of Array.from(arguments). This part of the code converted arguments object to an actual Array. Then we used .reduce() as in the previous example.
If you have any questions or anything you can find me on my Twitter, or you can read some of my other articles like How to add a thumbnail to a custom WordPress theme?.