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.