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


I would like to do a function without setting the required number of parameters. What ways or alternatives can I use to get this result?

asked by anonymous 19.05.2014 / 15:26

3 answers


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

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


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 case of the last example, calling the function directly the this is relative to the scope in which it is, probably window and does not have to do with the parameters passed to the function. In this case, the% arcs of% func (a, b, c) '. In this code example above 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 tem somente valores passados da forma mais comum ou seja is a local function variable and is not an array but rather as the @bfavaretto indicated is an array-like object , and share for example the arguments property arrays.


19.05.2014 / 15:35

Sergio's response is excellent and I agree that it is correct. I will leave an alternative just 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 - an options dictionary. This technique is used in frameworks such as 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 this way:

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

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

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

... Or:


... 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 and known signature. It's also worth documenting the properties you are looking for in the object you are receiving, for whom to use your function;)

19.05.2014 / 16:27

You can use an array for the parameters or you do not have to define them.

Create a rule to dynamically handle these values and solve your problem.

I use it a lot

19.05.2014 / 15:34