Why are parenthesis used to wrap a javascript function call?

Question

What is the difference between these two javascript function calls?

(function(){alert("foo")})()

versus this:

(function(){alert("foo")}()) 

Answer 1

This is done for readability.

There isn't a real functional difference between the two examples you've given, but both of them are very close to a simple function declaration, which is different. The parenthesis are added for readability, in order to distinguish them.

Here is what each of your snippets do:

In the first of your two snippets, the first parenthesis will be evaluated as the value of the enclosed function. Then this value will be called as a function. So ultimately the function will be executed, which is probably what you care about.

In your second snippet, the outer parenthesis will be evaluated as containing a function which is declared inline and immediately executed. Again, the function will be executed, which is still probably what you care about.

Both of these will execute the same function, so there won't be any significant difference.

The difference between a snippet like yours and a simple function declaration:

The functions you've given are also identical to the following. I've just added a function name and assigned the return value for syntactical accuracy, which you can ignore for now.

// javascript...
var val = 
  function myFooFunc () { 
    alert("foo"); 
  }();

However, this would be easily mistaken for a simple function declaration, which is different:

// javascript...
function myFooFunc () { 
  alert("foo"); 
}

Notice that the only real difference here is that this last function declaration is not executed immediately. The others are. So that is a very different behavior (the simple declaration may be executed later if it is called by name, or it may not ever execute at all). It's often hard to see that difference in the syntax right away, however, especially if the function body grows to be very long and requires scrolling on the screen.

Why are functions executed immediately?

When a function is immediately executed after it is declared, the value is often being returned to something (it may be part of an assignment statement). Sometimes the function is being executed right away because it contains inner functions and is being used to provide functional scope to the inclosed statements.

Essentially, people wrap parenthesis around the "executed immediately" form (both of your snippets, and the first one of my two) in order to give a visual cue to other developers that the function is being called immediately. It's just easier to read, since you might not catch the parenthesis until you got to the end of the function (or notice them at all).

Answer 2

They both have similar behaviors.

The parentheses encapsulating the function declaration tell the JavaScript engine to execute the code immediately after it's parsed. In the first example, you're creating a function object then invoking it with the parentheses that follow. In the second example, you are telling the JavaScript engine to create the function object and invoke it immediately.

Example:

// creates a function object
var f1 = (function() { alert('foo'); }); 

// creates a function object and executes it immediately
var f2 = (function() { alert('foo'); }()); 

The difference is that f1 gives you a function object. f2 creates and invokes an anonymous function.