Traversal - Web Design / Development

When adding JavaScript behaviours to your web site or application, keeping the global variable scope as clean as possible is a good practice to avoid naming conflicts, especially if you are using third party code from multiple sources.

The anonymous function wrapper

Closures in JavaScript allow us to keep the global scope tidy – we can create one by declaring an anonymous function in the global scope, and then immediately calling that function, like so:

(function() {
// variables and functions declared here are not visible in global scope

})();

The syntax is strange but if you break it down it makes sense: we place brackets around the function declaration so that it’s clear to JavaScript that we are then operating on the function as if it’s a variable.

It might help to remember that in JavaScript, we can also declare a function like this:

var myFunc = function() { // function body
};

// now we can call the function like normal:
myFunc();

So, all the brackets around the function declaration do is take out the unnecessary step of assigning to an intermediate variable. Then, we immediately call the function with (), just like we did above with myFunc – calling the function ensures that the code is actually executed, which is rather important if we actually want to achieve anything inside the wrapper!

The beauty of these anonymous function wrappers is that once you memorize the syntax, you don’t really have to think too hard about the mechanics of them.

The jQuery version

jQuery works hard to avoid polluting the global variable space by design. Out of the box, it only contains 2 global variables: the jQuery object itself, and its alias shorthand $. Building on the standard anonymous function wrapper, we can use the version illustrated below which has the additional benefit of ensuring that any use of $ inside the wrapper will be a call to the jQuery object and not to $ in another library such as Prototype or MooTools, if those happen to be used on the same page.

(function($) {
// code in here can safely use $, knowing it will reference jQuery

})(jQuery);

Here, the $ shorthand is a named parameter in our anonymous function, whose value becomes the jQuery object in our immediate call – (jQuery). Importantly, the value of $ outside the function is retained - this works because with with JavaScript closures, function parameter variables are also local in scope to the code in that closure, and any values with the same name outside that closure are not affected.

There is one gotcha: if you are using jQuery with Prototype or MooTools, it’s easiest to include jQuery before the other library, so that it doesn’t override the value of $ outside the anonymous function. If for whatever reason you must include jQuery after Prototype or MooTools, you can call jQuery.noConflict() before you call the $ shortcut in the other library – more information on this is available in the jQuery documentation here.

Once again though, the beauty of the jQuery wrapper code is that once you memorize it, the mechanics of how and why it works don’t really need to be fresh in your mind. But it still doesn’t hurt to know the how and why.