jQuery dollar sign ($) as function argument?

jquery closures dollar-sign
ma11hew28 picture ma11hew28 · Feb 13, 2011 · Viewed 20.2k times · Source

I understand JavaScript closures, and I've seen this done in native JS:

(function () {
  // all JS code here
})();

But, what does adding the jQuery spice do?

(function ($) {
  // all JS code here
})(jQuery);

Answer

Sarfraz picture Sarfraz · Feb 13, 2011

When you see:

(function() {
  // all JS code here
})();

It is knows as self-invoking anonymous function. The function executes as soon as it is parsed because of the addition of () at the end (that's how you run js functions).

Notice that extra outer braces are just convention, you could also write it up like:

function() {
  // all JS code here
}();

But that convention is heavily used all around and you should stick to it.

(function($) {
  // all JS code here
})(jQuery);

Here, $ is mapped to jQuery object so that you could use $ instead of jQuery keyword. You could also put some other character there too:

(function(j) {
  // all JS code here
})(jQuery);

Here, j is mapped to jQuery object instead.

Notice also that arguments specified to self-invoking function remain within the scope of that function and do not conflict with outer scope/variables.

I had written an article on the subject, please check it out:

Related questions

var self = this?

Using instance methods as callbacks for event handlers changes the scope of this from "My instance" to "Whatever just called the callback". So my code looks like this function MyObject() { this.doSomething = function() { ... } var self = this $('#foobar').bind('click', …

Read More
Assign click handlers in for loop

I'm having several div's #mydiv1, #mydiv2, #mydiv3, ... and want to assign click handlers to them: $(document).ready(function(){ for(var i = 0; i < 20; i++) { $('#question' + i).click( function(){ alert('you clicked ' + i); }); } }); But instead of showing 'you clicked 3…

Read More
What is the difference between $.proxy() and bind()?

In 2009, ECMAScript 5 added a built-in bind() function which takes an object as a parameter and returns an identical function in which this will always refer to the object you passed it. (I couldn't find anything that looked like a canonical …

Read More