What is the benefit of wrapping a jquery function in a closure?

Question

Hi I've been busy trying to take my knowledge of JQuery to the next level, So far I think I've understood everything but as I've ventured onto more advanced tutorials I've noticed several instances where the JQuery routine is wrapped in a closure (see below) however, the thing that confuses me is that it passes a $ and returns JQuery. My question is why? what can I do with the returned JQuery?

I'd really appreciate any light that people can shed on this for me.

(function($){
  $(document).ready(function(){
    var arr = $.map($("LI"), function(item, index){
      while (index < 3)
      {
        return $(item).html();
      }
      return null;
    });
    $(document.body).append("<span>The first three authors are: " +
      arr.join(", ") + "</span>");
  });
})(jQuery);

Thank you in advance.

Rob

Answer 1

It's a self invoking anonymous function (an un-named function that is declared and immediately executed) that takes one argument that gets assigned to the parameter $. The value passed in for the argument is jQuery, the jQuery function.

This is done so that the shorthand $ can be used inside the scope of the function to mean jQuery. Since all of the code inside of the function is in the scope of the function, it's a nice pattern for self containing the code and not polluting the global namespace.

It's also a nice pattern for allowing you to use the $ shorthand for jQuery inside of the function - it could be the case that the $ shorthand (window.$) is assigned something else, as can happen if you use multiple libraries on one page. By using the pattern, you can still use $ to reference jQuery object in the function for familiarity and terseness.

Answer 2

If you are writing a plugin, use

(function($) {
  //stuff that uses the jquery lib using $
})(jQuery);

This is equivalent to

var __myf = function($) {
  //stuff that uses the jquery lib using $
};
__myf(jQuery);

If you are writing page code, use

jQuery(function($) {
  //stuff that uses the jquery lib using $
});

Here, jQuery will invoke your function when it's ready to (when the document is loaded), and will pass itself as the first argument to your function.

Answer 3

This maps jQuery to $ for the scope of the closure, preventing conflicts with other libraries which may also claim the $ namespace (e.g. MooTools).