Immediate function invocation syntax

Question

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.

Walkthrough

Thanks for pointing this out. I never found a way how to get rid of JSLint's warning message "Be careful when making functions within a loop." I was careful, and did put the function in a closure but JSLint still complained. Now I know that it assumed that I used the second pattern. – Heron

See also Difference between (function(){})(); and function(){}(); and possible duplicate Location of parenthesis for auto-executing anonymous JavaScript functions? – Brash

I've been doing it "wrong" all this time. And when I say "all this time," I've been writing JavaScript since 1995. – Layby

Answer 1

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

Harless

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. – Arc

@altCognito, can you provide a fresh link for the PPT? – Fenella

I looked through the web, but I still cannot find a copy of that PPT – Blais

I couldn't find the original PPT, but I was able to find the same point found in his javascript convention guide. – Harless

archive.org have it? – Sruti

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

Pressey

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. – Walkthrough

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. – Pressey

Answer 3

Or, use:

void function () {
...
} ()

Presentationism