CODEWITHSUNDEEP
javascriptjqueryclosures
nycynik
nycynik

Reputation: 7541

Can someone explain what function($) does in jQuery

Recently I was reading someone else's code, and came across this:

// Semicolon (;) to ensure closing of earlier scripting
// Encapsulation
// $ is assigned to jQuery
;(function($) {

     // DOM Ready
    $(function() {
        ...
  });

})(jQuery);

I understand the point of the leading ;, And I understand that $(function() { is the same as document ready, but what is the point of adding function($)?

I understand it's a closure, but since this is always being called at the global scope, it seems like you don't need to bother with it. The $(function() { will use the same global object either way, no?

Is it to safeguard against something, or is it a best practice for another reason?

Upvotes: 8

Views: 1141

Answers (2)

ampersandre
ampersandre

Reputation: 3216

The code sample you've provided is an example of a Self-Invoking Function:

(function(){
 // some code…
})();

The first set of parentheses defines a function: (an anonymous function wrapped in parentheses)

(function() {})

That defines the anonymous function. On its own, it doesn't do anything. But if you add a set of parentheses () after the definition, it's the same as the parentheses used to call a function. Try this out:

(function(message) {
  alert(message);
})("Hello World");

That creates a function which accepts a parameter, and displays an alert box containing the provided value. Then, it immediately calls that function with a parameter of "Hello World".

In your example, a self-invoking function is defined. It accepts a parameter, which is named $. Then, the function is immediately called, with a reference to jQuery being passed in as the argument.

This is common if you want jQuery to operate in noConflict() mode (which removes the global reference to $).

In noConflict() mode, you can still access jQuery via the jQuery global variable, but most people would rather use $, so this self-calling function accepts the global jQuery variable as a parameter named $ in the scope of the function, which leaves you free to use the $ shortcut within the self-invoking function while having jQuery operate in noConflict() mode to avoid clashes with other libraries that use $ in the global scope.

Hope this answers your question!

Upvotes: 1

James Allardice
James Allardice

Reputation: 165951

It's a common structure for a jQuery plugin. It safeguards against the $ identifier having been overwritten and used for something else. Inside the anonymous function, $ is always going to refer to jQuery.

Example:

$ = "oh no";
$(function() { //Big problem!
    //DOM ready
});

By introducing a new scope, you can ensure that $ refers to what you expect it to:

$ = "oh no";
(function($) { //New scope, $ is redeclared and jQuery is assigned to it

    $(function() { //No problem!
        //DOM ready
    }); 

}(jQuery));

The main reasoning behind this is that numerous other JavaScript libraries use $ as an identifier (e.g. PrototypeJS). If you wanted to use both Prototype and jQuery, you need to let Prototype have its $ identifier, but you probably don't want to write out jQuery every time you want to call a jQuery method. By introducing a new scope you allow jQuery to have its $ back in that execution context.

Upvotes: 14

Related Questions