What is the benefit to initializing jQuery like this?

Question

I'm currently reading Greg Franko's blog article on 'jQuery Best Practices'.

Among his early slides, he explains the typical/better/best ways of doing things.

Typical (link)

$("document").ready(function() {
    console.log('hello world');
});

OR

$(function() {
    console.log('hello world');
});

Better (link)

(function($, window, document) {
    $(function() {
        console.log('hello world');
    });
 }(window.jQuery, window, document));

Best (link)

(function(yourcode) {
    yourcode(window.jQuery, window, document);
}(function($, window, document) {
    $(function() {
        console.log('hello world');
    });
}));

So I guess my question is - what makes the third example better than the second example? Both are IIFE. The only difference I see is that #2 passes in the jQuery object (+ window + document) into the IIFE and runs the code then while #3 passes in the jQuery object (+ window + document) AND the JavaScript code into the IIFE. What is the benefit to that?

Nevil

There is a bit of information here: gregfranko.com/blog/jquery-best-practices – Hut

Thank you! That makes sense. I couldn't wrap my mind around the fact that it just may be for readability. :) – Nevil

Let's thank Greg Franko here 🙂, I never thought of writing it this way, but it makes sense after comparison ! – Hut

Well as soon as you use $ instead of ( , you're risking of colliding with other libraries that expose the global $. So ocf. its preferred. The "best" example makes not much sense to me... passing window and document as parameters is like being afraid they will not exist in the IIFE scope... The superbest is simply jQuery(function($){ }); which is both DOM ready and the $ alias is secured. Afraid of jQuery as glob variable?.. well.... – Cerebellum

Besides $ being used by other libraries as well, there are (rare) times when people try to use different versions of jQuery on same page. This was quite often in the early days of WordPress, when WP did not ship with jQuery and plugin/theme developers would ship their own version of it, obviously causing conflicts. That's the main reason why, by default, WP runs jQuery in .noConflict() and requires a closure wrapper that passes it as reference. – Hite

I went ahead and upvoted all your comments. To Roko, the author even mentioned the ONLY reason he does that (and he started recently doing it) was to make it easier to read and know what global variables he was passing into his IIFE. – Nevil

Answer 1

@Minja,

I believe self-executing function wrapper (function() { ... }()) is what does the trick of increasing performance.

See trials below.

I tried shortening the best code with the below, which did decrease the execution time.

(function($, window, document) {
    $(function() {
        console.log('hello world');
    });
}(window.jQuery, window, document));

But the below did decrease it further. This now turns to be the best. :)

(function(){
  (function($, window, document) {
    $(function() {
        console.log('hello world');
    });
  }(window.jQuery, window, document));
}())

See screenshot below for proof:

Rask