22

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?

Community
  • 1
  • 1
Peter Ajtai
  • 56,972
  • 13
  • 121
  • 140

3 Answers3

35

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  --|
Christian C. Salvadó
  • 807,428
  • 183
  • 922
  • 838
5

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.

cweider
  • 466
  • 2
  • 5
  • Correction: (function () {}()); – Moses Sep 23 '10 at 23:07
  • 1
    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() { ... }());` – Peter Ajtai Sep 23 '10 at 23:13
  • 3
    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. – Moses Sep 23 '10 at 23:14
  • 1
    "[...] 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. – XP1 Jul 29 '11 at 05:15
  • 1
    ... "Crockford on JavaScript -- Act III: Function the Ultimate" (2010-02-17). At 56:09 minutes. – XP1 Jul 29 '11 at 05:16
2

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.

Moses
  • 9,033
  • 5
  • 44
  • 67
  • Is there a source for the "predominant convention"? – Casey Chu Sep 23 '10 at 23:30
  • @Casey - Crockford mentions it in his [ **code conventions** ](http://javascript.crockford.com/code.html) - [Mozilla](https://developer.mozilla.org/en/JavaScript_style_guide) and [Drupal](http://drupal.org/node/172169) conventions don't seem to mention it either way. – Peter Ajtai Sep 23 '10 at 23:49