Javascript wrapping code inside anonymous function

Question

I need help understanding this pattern for jQuery plugin authoring. Can somebody explain this simple bit of code for me?

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

I know this is to avoid conflict with different plugins using the same $ character but somehow cannot get around my head to understand how it works. What relation does the parameter $ has to the jQuery object that got parsed in?

Answer 1

Let's break this down:

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

First, the construct:

(function() {})(); 

creates an immediately executed function expression (often called IIFE). This is a function that is executed immediately rather than defined now, but called later. It is essentially an anonymous (unnamed) function that is defined and then executed right away.

Then, passing jQuery to it like this:

(function() {})(jQuery); 

passes jQuery as the first argument to that immediately executed function. Then, naming that first argument as $ defines that symbol inside the function to correspond to the first argument that is passed.

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

which in expanded form looks like this:

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

---

There a couple nice thing about this for jQuery plugin authors:

1. The IIFE creates a local function context so you can have variables which are "global" for your plug-in, but are not actually global variables and thus don't pollute or conflict with the actual global variable namespace.

2. You can program with $ for jQuery, whether or not the host program actually has that defined for jQuery because you've defined $ locally within your function.

Answer 2

What you have there is shorthand for something like this:

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

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