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

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?

Trusteeship

@Tim - Thanks for pointing that thread out. I didn't find it with search. – Trusteeship

Let's just keep voting up a duplicate... – Recollected

Josh: CMS's answer is better than any on the duplicate, so some good has come of it. – Sanjiv

@Tim - Josh won't get notified of your comment unless you begin with @Josh ==> [ How do comment replies work? ](meta.stackexchange.com/questions/43019/…) – Trusteeship

oh! I hadn't realised. Embarrassing. – Sanjiv

Answer 1

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  --|

Doorsill

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.

Striated

Correction: (function () {}()); – Runge

As Moses wrote, it looks like it's the other way around. From that text: When a function is to be invoked immediately, the entire invocation expression should be wrapped in parens so that it is clear that the value being produced is the result of the function and not the function itself.... (function() { ... }()); – Trusteeship

To be even clearer, Crockford doesn't (explicitly) recommend either form in that link. The only thing related that Crockford recommends is wrapping self-executing functions in parens. – Runge

"[...] and again, I'm wrapping the whole function and the invocation in parens. as a sign to the reader that there is something bigger going on than just an assignment of a function. There are some people who will put the golden paren. around the function and not around the whole invocation -- that doesn't make sense to me because what we are trying to tell the user is: 'Look at the whole thing', and putting parentheses around just part of it, I think, is counter-productive, so I think the whole thing needs to be wrapped in parens." -- Douglas Crockford. – Dyun

... "Crockford on JavaScript -- Act III: Function the Ultimate" (2010-02-17). At 56:09 minutes. – Dyun

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.

Runge

Is there a source for the "predominant convention"? – Etrem

@Casey - Crockford mentions it in his [ code conventions ](javascript.crockford.com/code.html) - Mozilla and Drupal conventions don't seem to mention it either way. – Trusteeship