How does this JavaScript/JQuery Syntax work: (function( window, undefined ) { })(window)?

Question

Have you ever taken a look under the hood at the JQuery 1.4 source code and noticed how it's encapsulated in the following way:

(function( window, undefined ) {

  //All the JQuery code here 
  ...

})(window);

I've read an article on JavaScript Namespacing and another one called "An Important Pair of Parens," so I know some about what's going on here.

But I've never seen this particular syntax before. What is that undefined doing there? And why does window need to be passed and then appear at the end again?

Answer 1

window is passed in like that just in case someone decides to redefine the window object in IE, I assume the same for undefined, in case it's re-assigned in some way later.

The top window in that script is just naming the argument "window", an argument that's more local that the global window reference and it what the code inside this closure will use. The window at the end is actually specifying what to pass for the first argument, in this case the current meaning of window...the hope is you haven't screwed up window before that happens.

This may be easier to think of by showing the most typical case used in jQuery, plugin .noConflict() handling, so for the majority of code you can still use $, even if it means something other than jQuery outside this scope:

(function($) {
  //inside here, $ == jQuery, it was passed as the first argument
})(jQuery);

Answer 2

The undefined is a normal variable and can be changed simply with undefined = "new value";. So jQuery creates a local "undefined" variable that is REALLY undefined.

The window variable is made local for performance reasons. Because when javascipt looks up a variable, it first goes through the local variables until it finds the variable name. When it's not found, javascript goes through the next scope etc. until it filters through the global variables. So if the window variable is made local, javascript can look it up quicker. Further infomation: Speed Up Your JavaScript - Nicholas C. Zakas

Answer 3

Others have explained undefined. undefined is like a global variable that can be redefined to any value. This technique is to prevent all undefined checks from breaking if someone wrote say, undefined = 10 somewhere. An argument that is never passed is guaranteed to be real undefined irrespective of the value of the variable undefined.

The reason to pass window can be illustrated with the following example.

(function() {
   console.log(window);
   ...
   ...
   ...
   var window = 10;
})();

What does the console log? The value of window object right? Wrong! 10? Wrong! It logs undefined. Javascript interpreter (or JIT compiler) rewrites it this way -

(function() {
   var window; //and every other var in this function

   console.log(window);
   ...
   ...
   ...
   window = 10;

})();

However, if you get the window variable as an argument, there is no var and hence no surprises.

I don't know if jQuery is doing it, but if you are redefining window local variable anywhere in your function for whatever reason, it is a good idea to borrow it from global scope.