114

There is a JSLint option, one of The Good Parts in fact, that "[requires] parens around immediate invocations," meaning that the construction

(function () {

  // ...

})();

would instead need to be written as

(function () {

  // ...

}());

My question is this -- can anyone explain why this second form might be considered better? Is it more resilient? Less error-prone? What advantage does it have over the first form?


Since asking this question, I have come to understand the importance of having a clear visual distinction between function values and the values of functions. Consider the case where the result of immediate invocation is the right-hand side of an assignment expression:

var someVar = (function () {

  // ...

}());

Though the outermost parentheses are syntactically unnecessary, the opening parenthesis gives an up-front indication that the value being assigned is not the function itself but rather the result of the function being invoked.

This is similar to Crockford's advice regarding capitalization of constructor functions -- it is meant to serve as a visual cue to anyone looking at the source code.

3

3 Answers 3

76

From Douglass Crockford's style convention guide: (search for "invoked immediately")

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.

So, basically, he feels it makes more clear the distinction between function values, and the values of functions. So, it's an stylistic matter, not really a substantive difference in the code itself.

updated reference, old PPT no longer exists

5
  • 1
    I'm glad I read this. I've just finished reading Javascript: The Good Parts, and what I kept thinking was that assigning the result of calling a function is really bad syntax, because you have to look at the first and last lines to understand what is happening. He doesn't use the wrapping parens in the book, but I see exactly why he recommends them.
    – Skilldrick
    Commented May 24, 2010 at 14:58
  • 2
    @altCognito, can you provide a fresh link for the PPT?
    – th1rdey3
    Commented Oct 30, 2013 at 16:57
  • 1
    I looked through the web, but I still cannot find a copy of that PPT Commented Jul 20, 2014 at 0:48
  • 1
    I couldn't find the original PPT, but I was able to find the same point found in his javascript convention guide.
    – cgp
    Commented Jul 29, 2014 at 19:24
  • archive.org have it? Commented Sep 13, 2016 at 21:15
2

Immediately Called Anonymous Functions get wrapped it in parens because:

  1. They are function expressions and leaving parens out would cause it to be interpreted as a function declaration which is a syntax error.

  2. Function expressions cannot start with the word function.

  3. When assigning the function expression to a variable, the function itself is not returned, the return value of the function is returned, hence the parens evaluate what's inside them and produce a value. when the function is executed, and the trailing parens ..}() cause the function to execute immediately.

2
  • Dathan, you're answering a different question. You are correct that the enclosing parentheses are sometimes syntactically necessary so the parser can distinguish function expressions from function declarations. But my question is about the placement of the invocation parentheses. You're third point is inaccurate; the enclosing parentheses are unnecessary in that case. Commented Feb 24, 2012 at 13:28
  • I was answering your first example where the Immediately Called Anonymous Function was not assigned to a variable and therefore the parenthesis are syntactically necessary for the first 2 reasons. The 3rd reason was just reinstating what you even said: "the opening parenthesis gives an up-front indication that the value being assigned is not the function itself but rather the result of the function being invoked." But I guess it wasn't clear.
    – Dathan
    Commented Mar 3, 2012 at 2:01
-3

Or, use:

void function () {
...
} ()
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.