Question

What would be the difference between

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

        $(this)/*... jQuery functions */

    });
})(jQuery);

and this?

(function(jQuery){
    jQuery(document).ready(function() {

        var $ = jQuery;
        $(this)/*... jQuery functions */

    });
})(jQuery);

and when should I use each?

Answer 1

The main difference between the two examples is that one is in a more local scope. In the first example, your redefinition is at a higher scope than in the second example where it’s a local variable. Theoretically, the one in local scope might be slightly faster to use, but whether that is a meaningful difference or would depend upon a lot of factors.

Each nested function declaration has it’s own set of local variables. When the javascript interpreter goes to find the value of a variable like $, it looks first for it in the most local scope (the local variables of the function that is being executed at the moment). If it doesn’t find it there, it goes up the chain looking for other variables in a higher scope. If it is not found at the next higher level of scope, it keeps going up the chain. Eventually, it gets to the global scope and searches the global scope for the desired symbol. If it isn’t found there, then it is undefined.

In your first code example, $ will be found at this higher scope as it is not directly a local variable of the document.ready callback function that was executing. In your second example, it will be a true local variable so it will be found slightly quicker.

In addition, both cases assign $ to a non-global variable within your scope which protects it from begin hijacked by outside code.