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 */ })();

How does this work? What's the purpose of putting the function in parens? Why the empty parens afterwards?

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

the function may be returning an other function.

Answer 4

That creates a function, calls it, and discards it.

It might be clearer if you look at it like this:

var throwaway = function(){
    // do cool stuff
};
throwaway();

This is done to create a private namespace. Code in the function can have functions and variables without worrying about conflicting with other code loaded in the page.

Answer 5

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.

Answer 6

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)