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 work fine.

What is the difference of the two (except on how it looks)?

Which one is more proper to use?

Answer 1

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
});

Answer 2

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 3

In addition to all the previous answers, jQuery have three initialization methods that can be used:

The traditional method compatible with most browsers, see code:

$(document).ready(function () {

        });

The short-hand method, see code:

$(function () {

        });

The implicit method, see code:

$().ready(function () {

        });

They all work for modern browsers and safe to use.