Setting default values for missing parameters in a Javascript function

Javascript functions can be passed as few or as many parameters as you like – the exact number of parameters specified in the function declaration is not exactly what must be passed in. This post shows how to set a default value for a parameter if it’s not passed in.

If a parameter is not passed in it will be undefined

The following example illustrates this, where the function takes three parameters and writes out to the document their values:

function foo(a, b, c) {
    document.write('a: ' + a + ' ');
    document.write('b: ' + b + ' ');
    document.write('c: ' + c + ' ');
    document.write('<br />');
}

To test it:

foo();
foo(1);
foo(1, 2);
foo(1, 2, 3);

And the result:

a: undefined b: undefined c: undefined
a: 1 b: undefined c: undefined
a: 1 b: 2 c: undefined
a: 1 b: 2 c: 3

The first function call doesn’t pass any parameters, so each is undefined. The second passes just the "a" parameter so that has a value and the others are undefined and so on.

Setting a default value

To specify a default value for a parameter in a Javascript function if it is not passed, check if it is defined and if not set a default value. For example:

function foo(a, b, c) {

    if(typeof a == 'undefined') {
        a = 'AAA';
    }
    if(typeof b == 'undefined') {
        b = 'BBB';
    }
    if(typeof c == 'undefined') {
        c = 'CCC';
    }

    document.write('a: ' + a + ' ');
    document.write('b: ' + b + ' ');
    document.write('c: ' + c + ' ');
    document.write('<br />');

}

To test it:

foo();
foo(1);
foo(1, 2);
foo(1, 2, 3);

And the result:

a: AAA b: BBB c: CCC
a: 1 b: BBB c: CCC
a: 1 b: 2 c: CCC
a: 1 b: 2 c: 3

A better solution

Thanks to one of my readers I have learned a better way of setting the default value for a variable and this example here is an update in response to his email. A variable can be assigned a default if no value for it is already set like so in Javascript:

a = a || "AAA";

If it’s undefined then it will be set as "AAA" in the above example. Using this method for my earlier examples looks like this:

function foo(a, b, c) {

    a = a || "AAA";
    b = b || "BBB";
    c = c || "CCC";

    document.write('a: ' + a + ' ');
    document.write('b: ' + b + ' ');
    document.write('c: ' + c + ' ');
    document.write('<br />');

}

This is a much more compact and readable way of writing the code to set the default values. However, please note that param || "default" will return the default value if param has a value of null, "", 0 or an empty array or object. Thanks to Hans Pufal for pointing this out.