Function with variable amount of parameters, what better way to do?

Question

I would like to do a function without defining the amount of parameters needed. What ways or alternatives can I use to get this result?

Answer 1

You can use . call() or . aplly or even call the function in the most convectional way, and within the function, use the reserved word arguments

function foo() {
    console.log(this, arguments);
}
foo.call('foo', 1, {animal: 'cão'}, 3)
foo.apply('foo', [1, {animal: 'cão'}, 3])
foo('foo', 1, {animal: 'cão'}, 3, 4);

http://jsfiddle.net/NDZeV/

These 3 different ways of calling a function and passing arguments give the same result in the first two cases.

'foo', // usando o call() e o apply() o primeiro argumento é o this
Arguments[3] // aqui o arguments têm em forma tipo array os restantes argumentos
    0: 1                // o mesmo que arguments[0], ou seja 1
    1: {animal: 'cão'}  // o mesmo que arguments[1], ou seja {animal: 'cão'} 
    2: 3                // o mesmo que arguments[2], ou seja 3

In the case of the last example, calling the function directly the this is related to the scope in which it is probably window and it has nothing to do with the parameters passed to the function. In this case the àrgumentstem somente valores passados da forma mais comum ou sejafunc(a, b, c)`. In this above code example this gives:

window, // aqui o "this" nõ tem a ver com os parametros da função e vai buscar o valor do this no escopo em que a função estiver
Arguments[3] // argumentos
    0: 'foo'            // o mesmo que arguments[0], ou seja 'foo'
    1:                  // o mesmo que arguments[1], ou seja 1
    2: {animal: 'cão'}  // o mesmo que arguments[2], ou seja {animal: 'cão'} 
    3: 4                // o mesmo que arguments[3], ou seja 3
    4: 4                // o mesmo que arguments[4], ou seja 4

This object arguments is a local variable of the function and is not an array but rather as @bfavaretto indicated is a array-like Object, and share property for example length arrays.

MDN:

• Arguments
• .call()
• .apply()

Answer 2

Sergio’s answer is excellent and I agree it’s the right one. I will leave an alternative only to increase the range of options for those who want to work with multiple parameters.

There is a technique that is to receive a single parameter - a dictionary of options. This technique is used in frameworks like the jQuery, for example.

An example:

function AplicaCSS (options) {
    if (!options) return;
    var font = options.font || "arial 12";
    var height = options.height || "15px";
    var width = options.width || "100px";
    /*etc., etc.*/
}

Note that in this way, you simply pass an object whose properties may vary. If I call the function that way:

AplicaCSS({font: "comic sans bold"});

... It works. The way the function is, the "missing" properties are set to default values. If I call the function as follows:

AplicaCSS({height: "10px", width: "50px"});

... Or:

AplicaCSS({});

... Or even:

AplicaCSS({bar: "lolwut"}); // Como é uma propriedade que não espero, 'bar' é ignorada.

... It works the same way. So the amount of variable parameters is the object you pass, not the function itself. This gives you a lot of flexibility, plus you have a function with fixed signature and known. It is also worth documenting the properties that you look for in the received object, for who will use its function ;)

Answer 3

you can use an array for the parameters or it is not necessary to define them.

creates a rule to dynamically handle these values and solved your problem.

I use it a lot