Looking at this JS code by David Fowler he wraps every "class" with an anonymous self executing method where he sends in jQuery and window. I get that this is a way for ensuring that $ and window are actually the global jQuery and winndow variables you'd expect them to be.

But isn't this a bit over-protective? Should you protect yourself from someone else changing the $ and window variable - is there actually code that does that, and if so why? Also, are there other advantages to wrapping everything like this?

Looking at this JS code by David Fowler he wraps every "class" with an anonymous self executing method where he sends in jQuery and window. I get that this is a way for ensuring that $ and window are actually the global jQuery and winndow variables you'd expect them to be.

But isn't this a bit over-protective? Should you protect yourself from someone else changing the $ and window variable - is there actually code that does that, and if so why? Also, are there other advantages to wrapping everything like this?

• javascript

• Moving window to function scope also means that minifiers can replace it with a shorter variable name – Steve Greatrex Commented Sep 14, 2012 at 9:15

5 Answers 5

If I remember correctly there are some other libraries than jQuery using the $.

The concept of using function context to create local / function scopes is all about to protect your own code. This especially makes sense if you expect your Javascript code to run in an environment where multiple other (maybe even unknown) scripts may get loaded.

So, if some other Javascript code which got load before your own, assigns window.$ with some other value (it might load the prototype framework for instance), then your code is already screwed if you try to access jQuery specific things.

Another point there is the "a--hole"-effect. Someone creates a line like

window.undefined = true;

...
Now, all your checks against undefined will pretty much fail. But by explicitly creating those variables/parameters and filling them with the values you expect, you can avoid all those problems.

(function(win, doc, $, undef) {
}(window, window.document, jQuery));

Generally most top-level JavaScript code should be wrapped in an IIFE, whether they pass in particular variables or not. This prevents variables created with var from polluting the global scope.

Another small benefit is minification: if you minify your code, making window into a "local variable" by passing it in as a parameter allows the minifier to rename it. This benefit goes away if you gzip, however, so it's not a real win.

Mostly people just pick a pattern for their IIFEs and stick with it, so in his case he's decided this is they way he writes his .js files and he does so uniformly. Having a uniform standard is valuable in and of itself.

To clarify, the code can be written in slightly longer form with

(function () {
    var $ = jQuery;
    var window = window;

    // ...
}());

The code inside the anonymous function is the the function scope, so it prevent confliction with the global variables.

Imaging that if every jQuery plugin is not wrapped in a anonymous function, then there will be a global variables hell.

It's just to preserver integrity. $ can be Prototype, so sending jQuery as argument will save your code if someone else add a library/variable which overwrite $.

About the second argument "window", I see it as a module you want to write on.