How does the (function() {})() construct work and why do people use it?

Question

(function() {})() and its jQuery-specific cousin (function($) {})(jQuery) pop up all the time in Javascript code.

How do these constructs work, and what problems do they solve?

Examples appreciated

Hardner

see #441239 – Aliphatic

It's not an exact duplicate. The answers of the other questions don't really say why one supplies jQuery as an argument. – Azucenaazure

I've always wondered why the extra parenthesis are needed. I believe it has to do with an ambiguity between blocks and object literals with the curly braces. Note they aren't required if you're assigning to something, like var x = function(){}() works just fine. – Dewitt

Why is this 'Closed as not a real question' ? The question is clear and relevant. – Aprilaprile

possible duplicate of What is the purpose of a self executing function in javascript? and What advantages does using (function(window, document, undefined) { … })(window, document) confer? – Charlatan

Answer 1

With the increasing popularity of JavaScript frameworks, the $ sign was used in many different occasions. So, to alleviate possible clashes, you can use those constructs:

(function ($){
  // Your code using $ here.
})(jQuery);

Specifically, that's an anonymous function declaration which gets executed immediately passing the main jQuery object as parameter. Inside that function, you can use $ to refer to that object, without worrying about other frameworks being in scope as well.

Polydactyl

Short and meaningful answer. +1! – Bassorilievo

It's technically a function expression (!declaration). IIFE – Wreathe

Can you explain what you mean by: "... without worrying about other frameworks being in scope as well."? – Twi

@Redtopia. Javascript scope is defined at function level. Everything outside a function is in global scope. Think about how many Javascript are included in a web page. Each variable outside a function scope is in dengerous of collision. – Innuendo

Thanks for clarifying... it wasn't clear to me that you were referring to the local scope of the anonymous function, which cannot be seen from the global scope, or the scope of any other function. – Twi

Answer 2

This is a technique used to limit variable scope; it's the only way to prevent variables from polluting the global namespace.

var bar = 1; // bar is now part of the global namespace
alert(bar);

(function () {
   var foo = 1; // foo has function scope
   alert(foo); 
   // code to be executed goes here
})();

Undervest

...and still have them be "global" with respect to your code. – Oldie

So the reference to Opera in example code is irrelevant/wrong? – Lately

@Bobby: there might be additional variables/functions within that block that are used for Opera only. – Maiduguri

Answer 3

1) It defines an anonymous function and executes it straight away.

2) It's usually done so as not to pollute the global namespace with unwanted code.

3) You need to expose some methods from it, anything declared inside will be "private", for example:

MyLib = (function(){
    // other private stuff here
    return {
        init: function(){
        }
    };

})();

Or, alternatively:

MyLib = {};
(function({
    MyLib.foo = function(){
    }
}));

The point is, there are many ways you can use it, but the result stays the same.

Flyman

1. Such a function is defined in a separated file, how does it executes? (it doesn't seems anyone call this function, so how the function is trigger?) 2. I didn't see the function at the top level has a "return" statement... I'm reading dojo.util._doh._browserRunner.js Thanks! – Albumenize

1) As I said, it executes itself, the last () tells it to execute. 2) It doesn't necessarily have to have a return, it might also set values on a particular property. It was merely an example I updated the answer with another possibility. – Flyman

Answer 4

It's just an anonymous function that is called immediately. You could first create the function and then call it, and you get the same effect:

(function(){ ... })();

works as:

temp = function(){ ... };
temp();

You can also do the same with a named function:

function temp() { ... }
temp();

The code that you call jQuery-specific is only that in the sense that you use the jQuery object in it. It's just an anonymous function with a parameter, that is called immediately.

You can do the same thing in two steps, and you can do it with any parameters you like:

temp = function(answer){ ... };
temp(42);

The problem that this solves is that it creates a closuse for the code in the function. You can declare variables in it without polluting the global namespace, thus reducing the risk of conflicts when using one script along with another.

In the specific case for jQuery you use it in compatibility mode where it doesn't declare the name $ as an alias for jQuery. By sending in the jQuery object into the closure and naming the parameter $ you can still use the same syntax as without compatibility mode.

Rictus

As I commented on @spoulson's answer, an anonymous function is not the same as a closure. – Eleanoreleanora

Answer 5

It explains here that your first construct provides scope for variables.

Variables are scoped at the function level in javascript. This is different to what you might be used to in a language like C# or Java where the variables are scoped to the block. What this means is if you declare a variable inside a loop or an if statement, it will be available to the entire function.

If you ever find yourself needing to explicitly scope a variable inside a function you can use an anonymous function to do this. You can actually create an anonymous function and then execute it straight away and all the variables inside will be scoped to the anonymous function:

(function() {
  var myProperty = "hello world";
  alert(myProperty);
})();
alert(typeof(myProperty)); // undefined

Grossman

Answer 6

Another reason to do this is to remove any confusion over which framework's $ operator you are using. To force jQuery, for instance, you can do:

;(function($){
   ... your jQuery code here...
})(jQuery);

By passing in the $ operator as a parameter and invoking it on jQuery, the $ operator within the function is locked to jQuery even if you have other frameworks loaded.

Oldie

That's a more specific variation on the original question, but it's still good info! :) – Lately

Not a answer at all, but I've upped it for the magnificent idea you had! – Civics

Answer 7

Another use for this construct is to "capture" the values of local variables that will be used in a closure. For example:

for (var i = 0; i < 3; i++) {
    $("#button"+i).click(function() {
        alert(i);
    });
}

The above code will make all three buttons pop up "3". On the other hand:

for (var i = 0; i < 3; i++) {
    (function(i) {
        $("#button"+i).click(function() {
            alert(i);
        });
    })(i);
}

This will make the three buttons pop up "0", "1", and "2" as expected.

The reason for this is that a closure keeps a reference to its enclosing stack frame, which holds the current values of its variables. If those variables change before the closure executes, then the closure will see only the latest values, not the values as they were at the time the closure was created. By wrapping the closure creation inside another function as in the second example above, the current value of the variable i is saved in the stack frame of the anonymous function.

Sapotaceous

A small nitpick, but it isn't the stack frame that is closed over, it is the surrounding lexical scopes. Good implementations of closures will only capture the symbols that are actually mentioned inside the closure, some implementations simply capture everything (Ruby does this, so be careful what you have near closures). One way to think about an object in OOP is as a closure where the captured symbols are explicitly defined (the object's member attributes). – Bukavu

That's true, but that's really just an implementation issue and conceptually one can consider that the stack frame is what's referenced by the closure. OOP-style "objects" in Lisp family languages are all done with closures, it's a powerful technique. – Sapotaceous

Yes, although if you want to think in terms of stack frames then the closure is a chain of stack frames, one frame for each enclosing function in the lexical scope together with the global scope. The lexical scope is easier to think about (especially when explaining to somebody who is new to closures) because you don't get into a pointless (and misleading) discussion about which stack frame when you have multiple levels of nested functions. The lexical scope is simply what you see in the source code. – Bukavu

Answer 8

This is considered a closure. It means the code contained will run within its own lexical scope. This means you can define new variables and functions and they won't collide with the namespace used in code outside of the closure.

var i = 0;
alert("The magic number is " + i);

(function() {
   var i = 99;
   alert("The magic number inside the closure is " + i);
})();

alert("The magic number is still " + i);

This will generate three popups, demonstrating that the i in the closure does not alter the pre-existing variable of the same name:

• The magic number is 0
• The magic number inside the closure is 99
• The magic number is still 0

Dehiscence

That's not a closure, that's simply demonstrating that a function has its own scope. A closure is formed when a function is defined inside another function and becomes available outside that function, thus retaining its access to the the variables, functions and parameters in the outer function even after that outer function has returned. – Eleanoreleanora

Just change the "(function() {..." to "var func = function() {...}; func();". There, closure. – Dehiscence

I don't want to labour this, but... still no closure: there's no inner function being made outside the outer function. An easy way to create a closure in your example would be to return a function that alerted i: var f = (function() { var i = 99; return function() { alert(i); }; })(); f(); – Eleanoreleanora

Point noted. It comes down to the specifics of the implementation. – Dehiscence

Answer 9

They are often used in jQuery plugins. As explained in the jQuery Plugins Authoring Guide all variables declared inside { } are private and are not visible to the outside which allows for better encapsulation.

Anaphora

{} do not in and of themselves create a new scope in JavaScript. The scope is created by the function declaration. – Allomorph

Answer 10

As others have said, they both define anonymous functions that are invoked immediately. I generally wrap my JavaScript class declarations in this structure in order to create a static private scope for the class. I can then place constant data, static methods, event handlers, or anything else in that scope and it will only be visible to instances of the class:

// Declare a namespace object.
window.MyLibrary = {};

// Wrap class declaration to create a private static scope.
(function() {
  var incrementingID = 0;

  function somePrivateStaticMethod() {
    // ...
  }

  // Declare the MyObject class under the MyLibrary namespace.
  MyLibrary.MyObject = function() {
    this.id = incrementingID++;
  };

  // ...MyObject's prototype declaration goes here, etc...
  MyLibrary.MyObject.prototype = {
    memberMethod: function() {
      // Do some stuff
      // Maybe call a static private method!
      somePrivateStaticMethod();
    }
  };
})();

In this example, the MyObject class is assigned to the MyLibrary namespace, so it is accessible. incrementingID and somePrivateStaticMethod() are not directly accessible outside of the anonymous function scope.

Allomorph

Answer 11

That is basically to namespace your JavaScript code.

For example, you can place any variables or functions within there, and from the outside, they don't exist in that scope. So when you encapsulate everything in there, you don't have to worry about clashes.

The () at the end means to self invoke. You can also add an argument there that will become the argument of your anonymous function. I do this with jQuery often, and you can see why...

(function($) {

    // Now I can use $, but it won't affect any other library like Prototype
})(jQuery);

Evan Trimboli covers the rest in his answer.

Aldon

Answer 12

It's a self-invoking function. Kind of like shorthand for writing

function DoSomeStuff($)
{
}

DoSomeStuff(jQuery);

Holding

Answer 13

What the above code is doing is creating an anonymous function on line 1, and then calling it on line 3 with 0 arguments. This effectively encapsulates all functions and variables defined within that library, because all of the functions will be accessible only inside that anonymous function.

This is good practice, and the reasoning behind it is to avoid polluting the global namespace with variables and functions, which could be clobbered by other pieces of Javascript throughout the site.

To clarify how the function is called, consider the simple example:

If you have this single line of Javascript included, it will invoke automatically without explicitly calling it:

alert('hello');

So, take that idea, and apply it to this example:

(function() {
    alert('hello')
    //anything I define in here is scoped to this function only
}) (); //here, the anonymous function is invoked

The end result is similar, because the anonymous function is invoked just like the previous example.

Anabolism

please see my first question of the comments to Evan...Thanks! – Albumenize

//here, the anonymous function is invoked, simple, but I didn't see it before :) – Condyloid

Answer 14

Because the good code answers are already taken :) I'll throw in a suggestion to watch some John Resig videos video 1 , video 2 (inventor of jQuery & master at JavaScript).

Some really good insights and answers provided in the videos.

That is what I happened to be doing at the moment when I saw your question.

Luxuriance

Answer 15

function(){ // some code here }

is the way to define an anonymous function in javascript. They can give you the ability to execute a function in the context of another function (where you might not have that ability otherwise).

Lovejoy