JavaScript scope and closure

Question

I\'m trying to wrap my head around closures (there\'s a joke in there somewhere) and I ran across this:

(function () { /* do cool stuff */ })();

Answer 1

That construct means declare an anonymous function and run it immediately. The reason you put your code inside a function body is because the variables you define inside it remain local to the function and not as global variables. However, they will still be visible to the closures defined inside this function.

Answer 2

The parens around the function make it clear that the function is an expression. The parens after are the call to the function.

Notice that the function does not have a name.

Answer 3

One closures approach is to pass variables to the function:

(function($, var_1, var_2) {
    // use JQuery, var_1 and var_2 as local variables
})($, var_1, var_2);

Answer 4

The point of this is that any variables declared in the cool stuff will not be created in global namespace. Any function in javascript will create such a scope. Suppose you have some javascript you want to run. If you do this:

var b = 1; 
// stuff using b

And some other code uses b, it will get your left over value. (Or, even worse, if some other code sets b before your code runs, then tries to get its old value later, you'd have changed it in the meantime.)

On the other hand, if you have this code, which declares and then calls the a function:

function a() { 
     var b = 1;
}

a();

And some other code later on uses b, it will not see your values, since b is local to the function. The problem with this, of course, is that you're still making a global name - "a", in this case. So, we want a function with no name - this is why you get the code you described. It declares a function with no name, and then calls it.

Unfortunately, you can't just say:

function() { ... }()

because this will be parsed as a function declaration statement, and then a syntax error. By wrapping the function declaration in parenthesis, you get a function expression, which can then be called. You call it like any other function expression (like a, above), using the second set of parens. For example, if the function took arguments, you'd pass them there:

(function(a) { ... })(1)

Answer 5

i just came across this post recently. This type of function definition & call is called self-invoking functions.

(function(){  //code })();

The code inside the function will be executed immediately upon its definition.

Answer 6

Putting the function declaration inside parens creates an expression which evaluates to the anonymous function within. Therefore, the first parenthetical evaluates to a function.

The "empty parens" at the end invoke the defined function, so "//do cool stuff" executes immediately.

This is a way to execute code on-the-fly while also keeping variables out of the global scope.

What is illustrated here, however, has nothing to do with closures - at least not directly. Closures are about maintaining a lexical scope after a parent function has already exited.