Default Arguments to Functions

I've noticed many requests similar to "how can I have defaults to optional arguments for my functions?" I see this as two sides of the same coin:

1. Named arguments
2. Default values if an argument isn't supplied

Let's amuse ourselves by looking at both parts a little deeper, and then we'll see a slick helper from the jQuery Project for handling this.

Named Arguments

Most of us are realizing that a good approach is to define your functions to take a single object as an argument. The object's properties are the arguments for your JavaScript function. Something like:

function fullname (o) {
   return o.first + ' ' + o.last;
}

fullname ({ first:'Bob', last:'Barker' });

Named parameters like this give you the following benefits:

• Order of the parameters doesn't matter.
• The function call clearly states the intention of the arguments.

The downside to this approach is that the function definition doesn't clearly define what object properties are expected. Of course, you'd comment the function to make up for that, right?

Optional Arguments

Let's expand our fullname function described above to take an optional middle name.

function fullname (o) {
    if ( o.middle ) {
        return o.first + ' ' + o.middle + ' ' + o.last;
    }
    else {
        return o.first + ' ' + o.last;
    }
}

This works pretty much as you'd expect, and in this situation is good enough. The problem it has setting middle to null is the same thing as not setting it at all.

But isn't that what we wanted?

In this case, probably, but it isn't the same. We actually want to compare the optional parameter to undefined instead.

function fullname (o) {
    if ( typeof o.middle != 'undefined' ) {
        return o.first + ' ' + o.middle + ' ' + o.last;
    }
    else {
        return o.first + ' ' + o.last;
    }
}

What is that blimey typeof o.middle != 'undefined' business?

Under the hood, JavaScript distinguishes between null and undefined, but in the != comparator coerces the values and null and undefined end up being the same thing. In later editions of JavaScript, you can use the double not equal operator:

if ( o.middle !== undefined ) . . .

Anyway, I guess this is a fairly weak example, but it does allow us to distinguish between null values and missing values. As you can guess, fullname ({ first:'pull', last:'wool', middle:null }) returns the string: pull null wool

Default Argument Values

To most people, the phrase "default arguments" really means, "Give me a one-line pattern to an if statement and assignment."

Let's suppose we have a function that needs to add 3 numbers, but any of them can be optional. In other words, if they aren't specified, we need to set that value to 0 or throw an error. The following is the pattern we typically use:

function summer(o) {
   o.a = (typeof o.a == 'undefined') ? 0 : o.a;
   o.b = (typeof o.b == 'undefined') ? 0 : o.b;
   o.c = (typeof o.c == 'undefined') ? 0 : o.c;
   return o.a + o.b + o.c;
};

But since I know you are using jQuery, you might as well use the $.extend() function. It is very delicious.

The jQuery Solution

Use $.extend() function from jQuery to clearly set default values:

function bling (args) {

    var parms = $.extend({
    'a': 0,
    'b': 0,
    'c': 0
    }, args);

    console.log("  The 'a' parameter: " + parms.a );
    console.log("  The 'b' parameter: " + parms.b );
    console.log("  The 'c' parameter: " + parms.c );
}

That pattern is so clear, my eyes are tearing.

Tell others about this article: