JavaScript anonymous function immediate invocation/execution (expression vs. declaration)

Question

Possible Duplicates:
What is the difference between a function expression vs declaration in JavaScript?
Explain JavaScript's encapsulated anonymous function syntax

Why this:

(function () {
    //code
}());

and this:

var f = function () {
    //code
}();

works, while this:

function () {
    //code
}();

does not? It looks exactly the same - anonymous function defined, and immediately called. Can someone make a quotation from the JavaScript/ECMAScript standard which explains that?

UPDATE: Thanks for the answers everyone! So it's about function expression vs. function declaration. See this Stack Overflow answer, ECMAScript standard section 13, and this great article: Named function expressions demystified.

To recap answers:

1. The first snippet is interpreted as an expression because the grouping operator, (), is applied - see ECMAScript standard section 11.1.6.

2. In the second snippet, the function is interpreted as an expression because it's on the right-hand part of assignment operator, =.

3. The third snippet doesn't have anything which allows the interpreter to read the function as an expression, so it's considered a declaration, which is invalid without an identifier (Gecko lets it pass however, but it chokes on following () grouping operator (as it thinks) applied to nothing).

Answer 1

The first two cases show function expressions, and can appear anywhere an expression like (1+1 or x*f(4)) would appear. Just like how 1+1, evaluates to 2, these expressions evaluate to a corresponding function.

---

The third case is a function declation statement, and can appear anywhere you can have other statements (like an if or while statement).

There is not much point in trying to declare an anonymous function via a Funcion declaration statements, since otherwise noone would get a reference to the function afterwards.

---

The reason you need the opening ( or the var x = like in the first two cases is that they force next bit to be parsed in an expression context. (just think how you cant do var x = if ..., for example). If you just put the function as the first thing it will be parsed as the declaration statement you don't want.

Answer 2

The first two are something called a function expression, meaning it's inline and interpreted as the JS code runs.

The 3rd is a function declaration and is interpreted when the code is compiled. Since it's interpreted at compilation, you can't immediately run it since none of the other code around it has been run yet.

To show an example:

// foo == undefined
// bar == function

function bar(){ .. }
var foo = function(){ ... }

// foo == function
// bar == function

Put simply, any time you have the word function without anything preceding it, it's a declaration. Any time something precedes it, it's an expression.

Answer 3

Here's a simple way to think of it: If function is the first keyword on the line, the parser will interpret the rest of the line as a function declaration. In other words, it will think you're trying to write something like this, as if you've forgotten to name your function:

function foo(){ 
    // code
}

The way to get around this is either to wrap the entire function inside some parens or make it part of a variable assignment. In either case, you're putting function further back on the line and allowing the parser to recognize you're not writing a function declaration.

It kind of seems trivial to me to allow function to appear at the start of a line and still distinguish between function expressions and function declarations, but I guess it wasn't so trivial back when JavaScript was first being designed.

Answer 4

Anonymous functions are explained well in Stack Overflow question Why do you need to invoke an anonymous function on the same line?.