Using Self Calling Anonymous Functions and $(document).ready

Question

I just recently learned about self calling anonymous functions. Some snippets of code that I came across used the self calling function along with the $(document).ready. It seems redundant, or pointless, to use both.

Is there a case where you'd use

(function(){
   $(document).ready();
})();

vs.

$(document).ready(function(){
   (function(){})();
});

I figure that you'd either want the script to be executed right away or after the DOM loaded. I can't see why you'd use both together.

Thanks.

Answer 1

There's definitely a use case for the first example. If you have other JS libraries/scripts loaded on the same page, there's no guarantee that they aren't overwriting the $ variable. (This is very common when you have Prototype and jQuery on the same page).

So if Prototype is using $ , you would need to use jQuery anytime you wanted to work with jQuery. This can get quite ugly:

jQuery(function(){
    jQuery('a', '#content').bind('click', function(){
        if(jQuery(this).attr('href') == 'www.google.com')
        {
            alert("This link goes to Google");
            jQuery(this).addClass('clicked'));
        }
    });
})

Remember, we can't use $ because that is a method from Prototype in the global scope.

But if you wrapped it inside of this..

(function($){
    $(function(){

        // your code here

    });
})(jQuery);

The $ would actually reference the jQuery library inside while still referring to Prototype on the outside! This can help tidy up your code:

(function($){
    $(function{}(
        jQuery('a', '#content').bind('click', function(){
            if(jQuery(this).attr('href') == 'www.google.com')
            {
                alert("This link goes to Google");
                jQuery(this).addClass('clicked'));
            }
        });
    ));
})(jQuery);

This is a common pattern with jQuery extensions to ensure that they are always added to the jQuery object, but can be written using $ to keep the code tidy.

Answer 2

You wouldn't want to use both together, is there something you're doing that requires you to?

In the jquery api documentation here, http://api.jquery.com/ready/ , you can see these examples:

The .ready() method is typically used with an anonymous function:

$(document).ready(function() {
// Handler for .ready() called.

});

Which is equivalent to calling:

$(function() {
// Handler for .ready() called.

});

But I'm not sure if this answers your question because I don't see where you actually ask one. Hope this helps just the same!

Answer 3

The only reason you would introduce another closure is to introduce another scope boundary for loading / protecting global objects such as $.

For Example:

$(document).ready(function(){

    // Do upper scope things.

    (function(){

        // Do lower scope things.

    })();

});

Based on you saying you have recently learning about this stuff I assume you are relativly new to JavaScript.

I have put together a blog post that might help explaining some of the basic concepts form the point of view of a newcomer to JavaScript, including function scope. http://bit.ly/tLkykX