Javascript: "Infinite" parameters for function?

In Chrome, when I type console.log in the one below:

console.log("A parameter", "A parameter", "A parameter", "A parameter", "A parameter", "A parameter", "A parameter", "A parameter", "A parameter", "A parameter", "A parameter", "A parameter", "A parameter");

...it prints it correctly, with no errors or warnings. I appended more parameters, but it still prints it out correctly.

console.log("A parameter", "A parameter", "A parameter", "A parameter", "A parameter", "A parameter", "A parameter", "A parameter", "A parameter", "A parameter", "A parameter", "A parameter", "A parameter", "A parameter", "A parameter", "A parameter", "A parameter", "A parameter", "A parameter", "A parameter", "A parameter", "A parameter", "A parameter", "A parameter", "A parameter", "A parameter", "A parameter", "A parameter", "A parameter", "A parameter", "A parameter");

How can I have an "infinite" parameter function just like that one?


Solution 1:

Functions can access an array-like object called arguments that contains all the arguments that they received

function print_my_arguments(/**/){
    var args = arguments;
    for(var i=0; i<args.length; i++){
        console.log(args[i]);
    }
};

And you can do the opposite conversion (call a function given a list of arguments) with the apply method:

// These are equivalent:
print_my_arguments(1,2,3);
print_my_arguments.apply(null, [1,2,3]);

// The first parameter to `apply` is the `this`.
// It is used when the function is a method.
foo.bar(1,2,3);
var f = foo.bar; f.apply(foo, [1,2,3]);

Some important points to note:

  1. arguments isn't an actual array and it has none of the usual array methods (slice, join, etc). You can convert it to an array with the following line:

    var args = Array.prototype.slice.call(arguments);
    
  2. Slice is also useful if you want your array to only contain the non-named arguments that were received:

    function foo(first_arg, second_arg /**/){
        var variadic_args = Array.prototype.slice.call(arguments, 2);
    }
    
  3. Not every browser can handle an arbitrarily large number of function parameters. Last time I tested this, in Chrome and IE there was a stackoverflow after some 200.000 arguments. If your function can receive an arbitrarily large number of arguments, consider packing all of those arguments in an regular array instead.

  4. Those /**/ comments that appear in the arguments lists for my examples are not mandatory. They are just a coding a convention that I use to mark my variadic functions and differentiate them from regular functions.

    // A quick glance would suggest that this function receives no
    // parameters but actually it is a variadic function that gets
    // its parameters via the `arguments` object.
    function foo(){
        console.log(arguments.length);
    }
    

Solution 2:

The modern way of doing this is using rest parameters:

function printArguments(...args) {
  args.forEach((arg, index) => {
    console.log(`Argument ${index}:`, arg);
  });
}

printArguments('hello', true, new Date());

By using the ...args syntax, all parameters are saved in an array named args.

Except of Internet Explorer, all browsers already ship this feature in their newest version.

Fiddle: https://jsfiddle.net/Lbf0stst/