JavaScript – Creating Default Arguments

I ran into an interesting quirk with JavaScript yesterday, one I’m surprised I hadn’t noticed before.  JavaScript does not allow you to give arguments default values when defining functions.  So after a bit of tinkering, I came up with a solution.

function lorum(x, y) {

	if(typeof(x) == "undefined") {
		x = 100; 
	}
	if(typeof(y) == "undefined") {
		y = 500; 
	}
 
	// ...
}

Of course you could use a ternary operator if you prefer, however I know I’m not alone when I say that I do not like them. In any case, here’s an example using them:

function ipsum(i, j) {

	i = typeof(i) == "undefined" ? 100 : i; 
	j = typeof(j) == "undefined" ? 500 : j; 
 
	// ...
}

Despite its reduced code space, I prefer not to use them as they can be confusing at first glance. But to each his own.


Tags: , , ,

  • Del.icio.us
  • StumbleUpon
  • Reddit
  • Twitter
  • RSS

11 Responses to “JavaScript – Creating Default Arguments”

  1. Mr eel says:

    Two things. Undefined evaluates to false in an if statement and if statements can be put on a single line — with the proviso that the code executed in the positive case only takes up one line. This means you can set default values like this:

    if (!x) x = 100;
    if (!y) y = 500;

  2. Peter Goodman says:

    Or even shorter:

    i = i || 100;
    j = j || 500;

  3. contantofaz says:

    What are the drawbacks to checking whether the variable exists more directly with:

    function ipsum(i, j) {

    i = i === undefined ? 100 : i;
    j = j === undefined ? 500 : j;

    // …
    }

  4. k4st says:

    In fact, you can shorten that in Javascript to:

    i = i || 100;
    j = j || 500;

  5. contantofaz says:

    If i or j is meant to be set to 0 by the end-user, this code will not allow that:

    function tell_it(i, j){
    i = i === undefined ? 100 : i;
    j = j === undefined ? 500 : j;
    system.k7.shell.print(i);
    system.k7.shell.print(j);
    }

    function say_what(i, j){
    i = i || 100;
    j = j || 500;
    system.k7.shell.print(i);
    system.k7.shell.print(j);
    }

    system.k7.shell.print(‘—– say what’);

    say_what();
    say_what(1, 2);
    say_what(0, 3);

    system.k7.shell.print(‘—– tell it’);

    tell_it();
    tell_it(1, 2);
    tell_it(0, 3);

    Outputs:

    $ k7 js_is_cool.js
    —– say what
    100
    500
    1
    2
    100
    3
    —– tell it
    100
    500
    1
    2
    0
    3

  6. contantofaz says:

    If i or j is meant to be set to 0 by the end-user, this code will not allow that:

    function tell_it(i, j){
    i = i === undefined ? 100 : i;
    j = j === undefined ? 500 : j;
    system.k7.shell.print(i);
    system.k7.shell.print(j);
    }

    function say_what(i, j){
    i = i || 100;
    j = j || 500;
    system.k7.shell.print(i);
    system.k7.shell.print(j);
    }

    system.k7.shell.print(‘—– say what’);

    say_what();
    say_what(1, 2);
    say_what(0, 3);

    system.k7.shell.print(‘—– tell it’);

    tell_it();
    tell_it(1, 2);
    tell_it(0, 3);

    Outputs:

    $ k7 js_is_cool.js
    —– say what
    100
    500
    1
    2
    100
    3
    —– tell it
    100
    500
    1
    2
    0
    3

  7. cancel bubble says:

    You should be declaring your variables with var inside the function, otherwise you’re creating global variables and are much more likely to have name collisions. vars inside a function are “private”, a variable declared within a function is not accessible outside of that function.

    function ipsum(i, j) {
    var i = i || 100;
    var j = j || 500;

    // or in one var declaration

    var i = i || 100, j = j || 500
    }

  8. geekfreak says:

    The typeof === undefined comparision is better as it will not cause problems with boolean (or falsey) parameter values.

    function foo(flag){
    return flag || true;
    }

    flag(true) == flag(false) == flag();

    a corner case for sure, but certainly a failure case for the boolean operand strategy

  9. geekfreak says:

    oops…

    function flag(flag){
    return flag || true;
    }

    flag(true) == flag(false) == flag();

  10. k4st says:

    Ah, very good point; I hadn’t thought of that. Thank you.

  11. Maat says:

    IMO it is more readable/understandable to use the “arguments” variable and it allows more flexibility. Something like:

    function lorum(/*x, y*/) {
    var x;
    var y;
    switch(arguments.length) {
    case 0 :
    x = 100;
    y = 500;
    break
    case 1 :
    x = arguments[0];
    y = 500;
    break
    case 2 :
    x = arguments[0];
    y = arguments[1];
    break;
    }
    // …
    }

Leave a Reply