I saw this code (explicly it's in jQuery, with modification)

(function(window,undefined){
    var jQuery=(function(){
        var jQuery=something;
        jQuery.xxx=xxx;
        //...
        return jQuery;
    })();
    //...
    window.jQuery=window.$=jQuery;
})(window);

While I understand wrapping code in a inline function call can clearly define the variable scope, I don't understand the benefits of

1. passing window with a parameter instead of using it directly,
2. getting an instance of undefined by a undefined parameter, and also
3. defining jQuery by the return value of another inline function call. Can somebody explain a bit?

EDIT write #3 more clearly:

What I understand is that the code defines jQuery inside another function then return it.

//(function(window,undefined){
var jQuery=(function(){
    // Inside this function defines jQuery and return it?
    var jQuery=function(selector,context){
        return new jQuery(selector,context); //simplified
    };
    jQuery.xxx=xxx;
    //...
    return jQuery;
})(); // This executes the inline function and assign `jQuery` with the return value???
//... })(window);

This is more like the following:

function define_jQuery(){
    // Inside this function defines jQuery and return it?
    var jQuery=function(selector,context){
        return new jQuery(selector,context); //simplified
    };
    jQuery.xxx=xxx;
    //...
    return jQuery;
}

//(function(window,undefined){
var jQuery=define_jQuery(); // This executes the inline function and assign `jQuery` with the return value???
//... })(window);

Wouldn't it be more simpler to do:

//(function(window,undefined){
var jQuery=function(selector,context){
    return new jQuery(selector,context); //simplified
};
jQuery.xxx=xxx;
//...
//... })(window);

I saw this code (explicly it's in jQuery, with modification)

(function(window,undefined){
    var jQuery=(function(){
        var jQuery=something;
        jQuery.xxx=xxx;
        //...
        return jQuery;
    })();
    //...
    window.jQuery=window.$=jQuery;
})(window);

While I understand wrapping code in a inline function call can clearly define the variable scope, I don't understand the benefits of

1. passing window with a parameter instead of using it directly,
2. getting an instance of undefined by a undefined parameter, and also
3. defining jQuery by the return value of another inline function call. Can somebody explain a bit?

EDIT write #3 more clearly:

What I understand is that the code defines jQuery inside another function then return it.

//(function(window,undefined){
var jQuery=(function(){
    // Inside this function defines jQuery and return it?
    var jQuery=function(selector,context){
        return new jQuery(selector,context); //simplified
    };
    jQuery.xxx=xxx;
    //...
    return jQuery;
})(); // This executes the inline function and assign `jQuery` with the return value???
//... })(window);

This is more like the following:

function define_jQuery(){
    // Inside this function defines jQuery and return it?
    var jQuery=function(selector,context){
        return new jQuery(selector,context); //simplified
    };
    jQuery.xxx=xxx;
    //...
    return jQuery;
}

//(function(window,undefined){
var jQuery=define_jQuery(); // This executes the inline function and assign `jQuery` with the return value???
//... })(window);

Wouldn't it be more simpler to do:

//(function(window,undefined){
var jQuery=function(selector,context){
    return new jQuery(selector,context); //simplified
};
jQuery.xxx=xxx;
//...
//... })(window);

• javascript
• jquery

• 1 Hiya, ejohn/apps/workshop/adv-talk/#31 and bennadel./blog/… should help! :) – Tats_innit Commented Jul 3, 2012 at 5:02

4 Answers 4

Answering these questions each separately:

1. Why window passed in? Because dereferencing a variable in JavaScript is painful. Passing in an instance means you don't have to. Typically the mechanism looks like this:

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

   In this scenario, one need not go to the global scope to dereference any of these three (and jQuery can be in .noConflict() to boot).

2. This is valid JavaScript: undefined = 2;. I grant that is very foolish, but it is possible. But if one accepts one more argument in a function than is passed, one is confident it is truely undefined and not a hacked copy of it.

3. Returning jQuery from a previous function allows method chaining: $('#sel').func1().func2(). This is possible because func1 probably looks something like this:

   jQuery.fn.func1 = function () {
       return $(this).each(function () {
           // do something fabulous
       };
   };
   

return $(this).bla_de_bla() is short-hand for:

    $(this).bla_de_bla(..);
    return $(this);

It also presumes that .bla_de_bla() also returns $(this)

EDIT: modified #3 to note that it's best at chaining rather than circumnavigating around .noConflict() and mis-named $.

One reason is for code minification. Minifiers can't shrink global names since they would no longer refer to the global object. By passing in all objects you're working with, they bee local. That way the thousands of references to window, and undefined can be minified.

Passing window as a parameter does precisely bugger all and is a waste of space: it is an object and so is passed by reference. Any changes to window inside the closure will affect the same instance as outside.

Getting an undefined parameter is a countermeasure to anyone stupid enough to name an actual variable undefined (which you can't do in newer browsers anyway)

As far as I can tell, that second inline function is pletely pointless, except if temporary variables are used in the process of defining jQuery properties.

The beautiful part about the "window" param is NOT Dereferencing. What if you pass in "window" in one instance and window.parent in another (think child windows controlling the parent for advance functionality, duh!!!).

1. explained above.

2. I'm not quite sure yet.

3. Chaining!!! ex: $('#blah').hide().show();

if the hide function didn't return the object (#blah), show couldn't do anything with it! It's returning #blah to the show function.

JQuery is always just a bit smarter than I am (and I usually find the hidden clues!).