I noticed in JQuery that the following code structure is used

(function(){var l=this,g,y=l.jQuery,p=l.$,...})()

Which seems to create a function, and call it.

What is the benefit of taking this approach versus having the contents of the function inline?

I noticed in JQuery that the following code structure is used

(function(){var l=this,g,y=l.jQuery,p=l.$,...})()

Which seems to create a function, and call it.

What is the benefit of taking this approach versus having the contents of the function inline?

• javascript
• closures
• anonymous-function

• 1 Duplicate: stackoverflow./questions/592396/… – Tim Down Commented Feb 10, 2010 at 9:53
• This one as well: stackoverflow./questions/631187/javascript-scope-and-closure The problem is that the findability of these questions/answers is not good. If all I know is "[javascript] (function()", then search does not do a good job finding anything useful. – Alan Commented Feb 10, 2010 at 19:07

5 Answers 5

It creates a closure to prevent conflicts with other parts of code. See this:

• http://docs.jquery./Plugins/Authoring

Particularly handy if you have some other library that uses the $() method and you have to retain the ability to use that with jQuery also. Then you can create a closure such as this:

(function($) {
    // $() is available here
})(jQuery);

It creates a scope for variables, in particular defining $ for example to bind to jQuery, no matter what other libraries overwrite it. Think of it as an anonymous namespace.

With self invoking anonymous function you create a local scope, it's very efficient and it directly calls itself.

You can read about it here

It's just like:

var foo = function(){var l=this,g,y=l.jQuery,p=l.$,...};
foo();

But more simple and do not need a global variable.

It allows to have local variables and operations inside of the function, instead of having to transform them to global ones.