JavaScript local alias pattern

(c) Bertrand Le Roy 2005 Here’s a little pattern that is fairly common from JavaScript developers but that is not very well known from C# developers or people doing only occasional JavaScript development.

In C#, you can use a “using” directive to create aliases of namespaces or bring them to the global scope:

namespace Fluent.IO {
    using System;
    using System.Collections;
    using SystemIO = System.IO;

In JavaScript, the only scoping construct there is is the function, but it can also be used as a local aliasing device, just like the above using directive:

(function($, dv) {
    $("#foo").doSomething();
    var a = new dv("#bar");
})(jQuery, Sys.UI.DataView);

This piece of code is making the jQuery object accessible using the $ alias throughout the code that lives inside of the function, without polluting the global scope with another variable.

The benefit is even bigger for the dv alias which stands here for Sys.UI.DataView: think of the reduction in file size if you use that one a lot or about how much less you’ll have to type…

I’ve taken the habit of putting almost all of my code, even page-specific code, inside one of those closures, not just because it keeps the global scope clean but mostly because of that handy aliasing capability.

7 Comments

  • Once the annonymous function grows larger than one screen, it's better to use local variables rather than aliasing, since they keep the alias and value in one place. It's annoying if one has to scroll to understand the meaning of an alias -- declaring them as locals is just as fast and keeps the pair together.

  • @Alexander: comments are great for that too.

  • That's well put. I believe the other benefit can also be performance, as locally scoped variables are accessed more quickly than global ones (or less local ones!)

  • We're running into an issue in our DotNetNuke installation where, at some point between the head and where our JS is loaded at the bottom of the page, the "$" alias is getting squashed by what looks like the MS Ajax library. I think one of the modules we are using is creating the alias. Haven't tracked it down because I use this exact pattern to avoid it in our JS. The jQuery object still exists in the page, so I can just pass it in to the anonymous function and re-create the "$" alias scoped to my function.

  • @Anup: especially in the case of something like Sys.UI.DataView as you're also avoiding the two property lookups.

    @Scott: That's not possible unless you're using an extremely old pre-alpha build of MS Ajax: MS Ajax Library is not using $ at all, anywhere. But yeah, whatever is doing it, this pattern fixes it. :)

  • Hi,

    This is very nice article.

    Thanks,

    Thanigainathan.S

  • It is also wise to use closure argument for robust, simple and ubiquotus existence of: undefined.

    (function ( global, undefined ) {

    }( this )) ;

    And yes 'this' as 'global' pattern above is a good thing. Thus above code is host-change resilient. In browser 'this' is 'window' but in WSH 'this' is global object. Same as in WSC as WSF.

    And, also for v.long source code (> 1 page) I use local object to cluster local aliases. Makes code more readable and intelissense friendly too.

    (function ( global, undefined ) {

    var local = {
    mbox : global.alert ? global.alert : global.Echo
    }

    global.msgBox (m) { local.mbox(m); }

    }( this )) ;

    --DBJ

Comments have been disabled for this content.