Andre Lewis on Tech

This is an incredibly useful real-world construct for your Javascript and Ajax programming efforts. As you make your Javascript code encapsulated and reusable, you inevitably need to parameterize your functions so that some of the arguments are optional. There are multiple of ways of doing this, but my coding has benefited greatly from a consistent methodology and syntax. Here's an example:

function doSomething (sWhatever, oOptions) {
  var oOptions = augment({
      sOptOne: "foo",
      bOptTwo: false
    }, oOptions );

  // sWhatever is a regular argument. We assume it's always going to be passed
  alert(sWhatever);

  // sOptOne and bOptTwo are optional;
  // they are defaulted to "foo" and false, respectively
  alert(oOptions.sOptOne);
  alert(oOptions.bOptTwo);
}

The function defined above can be called in a number of different ways:

• doSomething("First value"); -- this invokes the function without either of the optional arguments, so sOptOne and bOptTwo both get their default values ("foo" and false, respectively).
• doSomething("First value",{bOptTwo:true}); -- in this case, the bOptTwo argument is specified in the functional call, so it's value is true, rather than the default value of false.
• doSomething("First value",{sOptOne:"Yahoo",bOptTwo:false}); -- here, both the optional arguments are provided.

The key here is that the optional arguments are specified by name, rather than position. Therefore, you can leave any of them out, and they assume the default value you specified in the function itself.

The augment() Function

The "augment()" function is what makes it all happen. This function takes two or more objects, and augments the first object with properties from the second (or subsequent, of you pass more than one) object(s).

For defaultable arguments, the first object is the default values ( that's the {sOptOne: "foo", bOptTwo: false} part, and the second object is the oOptions object passed into our function.

Here is the augment function:

/*
  Augment an object by replacing its key:value pairs with those
  from other object(s), and adding pairs from other object(s) that don't
  exist in you.  Key:value pairs from later objects will
  overwrite those from earlier objects.
  
  If null is given as the initial object, a new one will be created.
  
  This mutates and returns the object passed as oSelf. The other objects are not changed.
*/
function augment (oSelf, oOther) {
    if (oSelf == null) {
        oSelf = {};
    }
    for (var i = 1; i < arguments.length; i++) {
        var o = arguments[i];
        if (typeof(o) != 'undefined' && o != null) {
            for (var j in o) {
                oSelf[j] = o[j];
            }
        }
    }
    return oSelf;
}

Optional, defaultable arguments are a powerful Javascript programming technique. They make it much easier to evolve your code, especially when you build "visual" objects -- objects that correspond to visual elements on the page.