Is there a difference between (function() {...}()); and (function() {...})(); ?

Question

Possible Duplicate:
Location of parenthesis for auto-executing anonymous JavaScript functions?

Sometimes I see:

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

and sometimes I see:

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

I see both forms with and without arguments. They both execute the anonymous function.

Is there a difference between the two forms? Are there any compelling reasons to use one form over the other?

Answer 1

I currently found that they are in different in syntax:

function{}(); (without parens) doesn't work, because when JS is in Statement and saw function keyword, it's expecting a function declaration, which does not allow () at the end.

 Statement ::= FuncDecl ;
 FuncDecl ::= function Ident_optional ( ArgList ) { Block }

and function{ }() makes the parse chokes when it's expecting Statement's ;

The first form seems easier to type than the second one.

Answer 2

There is no difference between the two, so far as the compiler is concerned. However, will find that the (function () {}()) style is recommended in Douglas Crockford’s JavaScript code conventions.

Answer 3

As far as differences go, it is really just syntactic sugar. Somewhat equivalent to: "do you like jQuery() or $()?" Both can be compiled, executed, and used interchangeably (AFAIK).

From the code samples I have seen thus far, more people seem to follow the Crockford code convention:

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

Personally, I prefer the (function(){})(); convention because it is more apparent to me that the function is self-executing; I'm also a big user of jQuery and that's the convention used in jQuery source.

Additionally, it is considered good practice to use parens to enclose your self-executing function, regardless of which form you choose to go with.

Answer 4

There is no practical difference in those two forms, but from a grammatical point of view the difference between the two is that The Grouping Operator - the parentheses - will hold in the first example a CallExpression, that includes the FunctionExpression:

               CallExpression
                |         |
       FunctionExpression |
                |         |
                V         V
    (function() {       }());
    ^                      ^
    |--PrimaryExpression --|

In the second example, we have first a whole CallExpression, that holds the FunctionExpression:

          PrimaryExpression
                |
         FunctionExpression
                |
                V
    (function() {       })();
    ^                      ^
    |--  CallExpression  --|