8

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

yfeldblum
  • 65,165
  • 12
  • 129
  • 169
user432350
  • 161
  • 9
  • Where is jQuery *returned*? I cannot see it. Can you please be more specific? And also `$` is never passed. – Felix Kling Aug 26 '10 at 21:29
  • 1
    Looking at it now I can see that my question was pooly phrased. I now understand that the self invoking function takes the parameter $ which is passed the argument of the global jQuery object. – user432350 Aug 27 '10 at 15:46
  • Duplicate of http://stackoverflow.com/questions/2235163/what-is-benefit-of-using-function-in-javascript, http://stackoverflow.com/questions/592396/what-is-the-purpose-of-a-self-executing-function-in-javascript and http://stackoverflow.com/questions/631187/javascript-scope-and-closure – Tom Auger May 26 '11 at 20:32

3 Answers3

9

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.

Russ Cam
  • 124,184
  • 33
  • 204
  • 266
  • Many thanks for taking the time to reply to my question. Brilliant! – user432350 Aug 27 '10 at 15:43
  • 1
    I can also be an advantage towards javascript minimization. You could pass more global variables towards the function: `(function(doc, win, $, SE){ ... })(window, document, jQuery, SomethingElse);`. Inside the function the `doc`, `win` and other variable names will be shortened to only one character by most optimizers. – 7ochem Sep 05 '14 at 13:58
5

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.

yfeldblum
  • 65,165
  • 12
  • 129
  • 169
  • Many thanks for taking the time to reply. Between all of the answers I've recieved to my question I now fully understand what is going on and more importantly why. – user432350 Aug 27 '10 at 15:48
1

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

scronide
  • 12,012
  • 3
  • 28
  • 33