Javascript wrapper code inside anonymous function

Question

I need help understanding this template to create a jQuery plugin. Can anyone explain this simple code for me?

(function($) { /* Code here */ })(jQuery); 

I know that it is necessary to avoid conflicts with different plugins using the same $ symbol, but for some reason cannot go around my head to understand how this works. What does the $ parameter have to do with the jQuery object that got the parsing?

Answer 1

Let's break it down:

 (function($) { /* Code here */ })(jQuery); 

First, build:

 (function() {})(); 

instantly creates a function expression (often called IIFE). This is a function that is executed immediately, and not defined now, but called later. This is essentially an anonymous (unnamed) function that is defined and then executed immediately.

Then, passing it jQuery as follows:

 (function() {})(jQuery); 

passes jQuery as the first argument to this immediately executed function. Then, assigning this first argument the value $ , this character inside the function corresponds to the first argument that is passed.

 (function($) {})(jQuery); 

which in expanded form is as follows:

 (function($) { // you can use $ here to refer to jQuery })(jQuery); 

---

Here are a couple of good things about this for jQuery plugin authors:

• IIFE creates a local context for the function, so you can have variables that are "global" for your plugin, but are not really global variables and thus do not pollute or conflict with the actual namespace of the global variables.

• You can program with $ for jQuery whether the host program really has what is defined for jQuery because you defined $ locally inside your function.

Answer 2

You have a shortcut for something like this:

 function anonymous_function($) { // Code here }; anonymous_function(jQuery); 

As you can see, it allows you to use the $ symbol as a reference to a jQuery object inside a function.

Answer 3

A function in JavaScript can be an expression or an expression . When you use a function expression, you can pass it like any other value:

 > console.log(function() { 1 + 1; }); > (function() {}) && doExpensiveWork(); // etc. 

One of the things you can do with a function expression immediately calls it. In such cases, the function is called the function expression immediately called (or IIFE for short) :

 > (function() { console.log("IIFE running"); })(); IIFE running 

This is the same as creating a function and calling it in two stages:

 > var notAnIIFE = function() { console.log("running"); }; > notAnIIFE(); running 

A functional expression can, of course, take arguments:

 > var someFunction = function(x, y) { return x + y; }; > var seven = someFunction(3, 4); > seven 7 

So IIFE can also be called with arguments:

 > var seven = (function(x, y) { return x + y; })(3, 4); > seven 7 

In case of a call like this:

 (function($) { /* do work with $ */ })(jQuery); 

the value associated with the jQuery name is passed to the function expression as the $ argument. This is similar to doing the following:

 var initializePlugin = function($) { /* do work with $ */ }; initializePlugin(jQuery); 

but it leaves no trace in the parent namespace (whereas in our second example, our initializePlugin name remains after the completion of our plugin configuration).

Answer 4

A function in javascript creates a scope, it is not only a variable $ , but also variables local to this function. And given the $ parameter, it becomes local to the function and is safe to use, referring to jQuery .

Answer 5

+1 for jfriend00 answer.

But including jQuery in the page overwrites both the global jQuery and $ characters (see jQuery.js line 9579 ), potentially causing conflicts with other libraries that define global $.

So, let's take it even further to stop the global conflict $:

 (function($) { // you can use $ here to refer to jQuery })(jQuery.noConflict()); 

as it shown on the picture:

 <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> <script> (function($) { console.log('want $ to be jQuery here so want true: ' + ($ === jQuery)); })(jQuery.noConflict()); console.log('do not want $ to be jQuery here so want false: ' + ($ === jQuery)); </script>