What a heck is a (function ($){ ... })(jQuery)

Tags: , , ,

Recently I wrote two articles on how to extend jQuery using its plug in system and a shorthand for that. If you look into them closely they are actually the same thing. The only difference being that the code in first one is wrapped in this anonymous JavaScript function:

(function ($) { 
    // code goes here 
})(jQuery)

Little research shows that this allows the use of $ within this function without conflicting with other JavaScript libraries who are using it. Basically, since we are setting $ as  a parameter, $ will overwrite any globally defined variables/references of $ in that particular anonymous function.

// Assume "$" is a prototype reference 
(function ($) { 
    // Here "$" is a jQuery reference 
})(jQuery)

So basically it’s an anonymous function that lets jQuery play nicely with other javascript libraries that might have $ variable/function. Also if you notice, all jQuery plugins code is wrapped in this anonymous function.

NOTE:
The following two javascript codes are equivalent:

// Code 1:
(function ($) { 
    // Javascript code 
})(jQuery)

// Code 2:
var myFunction = function ($) { 
    // Javascript code 
};
myFuntion(jQuery);