How should I initialize jQuery?

Question

I have seen this (I'm also using it):

$(document).ready(function(){
   // do jQuery
})

and also this (I have tried lately):

(function(){
   // do jQuery
})(jQuery)

both works fine.
My question is what is the difference of the two ( except on how it looks ).
Which one is more proper to use?.
Can you give me some pro's and con's for each?
Is there also another way of doing this?
(also help me with the title above. SO suggested, "The question you're asking appears subjective and is likely to be closed.")
Thanks everyone.

Answer 1

The first example runs the function when the DOM tree is built. The second example runs the function right away.

If you look closely, in the second example, there are two parentheses after the function declaration ( in this particular case, you pass in the global jQuery object as an argument to avoid conflict ), thereby immediately invoking the function

The right function to use depends on when you want the function to run. If you want to run a function on DOMReady ( the ready event ), you can use $( document ).ready like you mentioned or the shorthand $( function() {...} ).

Otherwise, if you want to run a function immediately and have anonymous function scope, use the second example.

Answer 2

I always use the first. The second appears to be a way to protect against jquery being overriden. One reason you might do this is if you don't know what other scripts will be loaded on the page. If all of your stuff depends on, say, jquery 1.3, and you're in an environment where you don't control the entire page, your code could break if someone loads in jquery 1.4. Sounds ugly, but this sort of thing does happen. So you can cover your butt by creating a closure immediately after you load jquery, and holding your version of jquery inside that closure. I think that's what's going on in the second example.

Neither one actually initializes jquery. Jquery takes care of any initilazation it needs on its own. You'd still, quite likely wind up using the first example even if you were using the second, you'd just be putting the $(document).ready inside the function in your second example.

Answer 3

The second example you show is a self executing anonymous function. Every separate JS file you use would probably benefit from using it. It provides a private scope where everything you declare with the var keyword remains inside that scope only:

(function($){
   var special = "nice!";
})(jQuery);

alert(special); // would be undefined

The first example is shorthand for $(document).ready which fires when the DOM can be manipulated.

A couple cool things about it. First, you can use it inside the self executing function:

(function($){
   $(function(){
      // Run on DOM ready
   });

   // Run right away
})(jQuery);

Secondly, if all you need is a few lines in document ready, you can combine both the private scope and the DOM ready function like this:

jQuery(function($){
   // $ = jQuery regardless of what it means
   // outside this DOM ready function
});