JQuery ($) dollar sign as function argument?

Question

I understand JavaScript closure, and I saw this in my own JS:

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

But what does adding jQuery spices do?

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

Answer 1

Its a way to map jQuery to $ in such a way as to not see all the code on the page.

You might have an existing script that uses jQuery that you like to reuse, but you also use a prototype that also uses $ on the same page.

By wrapping any jQuery with the code in this construct, you override $ to jQuery for the contained part without interfering with other code on the page.

Answer 2

When you see:

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

It is known as a self-running anonymous function. The function is executed as soon as it is analyzed due to the addition of () at the end (the way you run the js functions).

Note that additional outer curly braces are just a convention; you can also write it like this:

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

But this agreement is heavily used everywhere, and you must stick to it.

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

Here, $ mapped to a jQuery object so you can use $ instead of the jQuery keyword. You can also add another character there:

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

Here j displayed instead of the jQuery object.

Note also that the arguments defined for the self-invoking function remain within this function and do not conflict with the outer scope / variables.

---

I wrote an article on this topic, please read it:

• Javascript Self-Completion Functions

Answer 3

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

It is an expression with pronounced immediate function ( IIFE ), pronounced as "iffy". Some people also call them “anonymous, self-fulfilling functions” or simply “self-fulfilling functions”.

 (function(aParameter) { alert(aParameter); // will alert "an argument" })("an argument"); 

Here is IIFE, which takes the parameter "aParameter" and passes the argument "argument".

 (function($){ alert($(window).jquery); // alert the version of jQuery })(jQuery); 

This is similar, but "jQuery" (an instance of the jQuery object) is an argument for IIFE, in which case jQuery is passed as the "$" parameter. Thus, simply by typing '$', the IIFE body has access to jQuery and its members. This is a common jQuery convention, and it is common for people who write jQuery plugins to maintain this convention in this way.

This code not only supports the jQuery convention, but also ensures that neither you nor anyone else can accidentally violate this convention. For example, enter the following code:

 var $ = function() { alert('foo'); } 

This code turns '$' into something that is definitely not jQuery. If someone did this in other code outside your plugin code, and then you obviously did not pass jQuery as "$" to your plugin, then you cannot use "$" as jQuery, as usual.

Answer 4

There are two reasons to pass jQuery closure this way.

Most significant is that it makes your code run on pages that use jQuery "no conflict" mode , which allows you to use jQuery along with other libraries that want to control global $ . For this reason, the (function($) { ... })(jQuery) method is highly recommended when writing jQuery plugins.

The second reason is that it makes $ local variable in the scope of the self-executing function, and access to the local variable is (slightly) faster than access to the global variable. Personally, I don’t think this is a very good reason - I can’t imagine a scenario in which the overhead of using jQuery methods rather than the DOM would be acceptable, but access to jQuery as a global variable would not become. :-)

I would say that the best reason to use this technique when you are not writing a plugin is consistency - you are less likely to forget to do it when it is important, if you are used to doing it when it is not. In addition, you never know when you will have the opportunity to process the code!