javascript - Explain the encapsulated anonymous function syntax -

summary

can explain reasoning behind syntax encapsulated anonymous functions in javascript? why work: (function(){})(); doesn't: function(){}();?

---

what know

in javascript, 1 creates named function this:

function twoplustwo(){     alert(2 + 2); } twoplustwo(); 

you can create anonymous function , assign variable:

var twoplustwo = function(){     alert(2 + 2); }; twoplustwo(); 

you can encapsulate block of code creating anonymous function, wrapping in brackets , executing immediately:

(function(){     alert(2 + 2); })(); 

this useful when creating modularised scripts, avoid cluttering current scope, or global scope, potentially conflicting variables - in case of greasemonkey scripts, jquery plugins, etc.

now, understand why works. brackets enclose contents , expose outcome (i'm sure there's better way describe that), such (2 + 2) === 4.

---

what don't understand

but don't understand why not work equally well:

function(){     alert(2 + 2); }(); 

can explain me?

it doesn't work because being parsed functiondeclaration, , name identifier of function declarations mandatory.

when surround parentheses evaluated functionexpression, , function expressions can named or not.

the grammar of functiondeclaration looks this:

function identifier ( formalparameterlistopt ) { functionbody } 

and functionexpressions:

function identifieropt ( formalparameterlistopt ) { functionbody } 

as can see identifier (identifieropt) token in functionexpression optional, therefore can have function expression without name defined:

(function () {     alert(2 + 2); }()); 

or named function expression:

(function foo() {     alert(2 + 2); }()); 

the parentheses (formally called the grouping operator) can surround expressions, , function expression evaluated.

the 2 grammar productions can ambiguous, , can same, example:

function foo () {} // functiondeclaration  0,function foo () {} // functionexpression 

the parser knows if it's functiondeclaration or functionexpression, depending on context appears.

in above example, second 1 expression because comma operator can handle expressions.

on other hand, functiondeclarations appear in what's called "program" code, meaning code outside in global scope, , inside functionbody of other functions.

functions inside blocks should avoided, because can lead unpredictable behavior, e.g.:

if (true) {     function foo () { alert('true'); } } else {     function foo () { alert('false!'); } }  foo(); // true? false? why? 

the above code should produce syntaxerror, since block can contain statements (and ecmascript specification doesn't define function statement), implementations tolerant, , take second function, 1 alerts 'false!'.

the mozilla implementations -rhino, spidermonkey,- have different behavior. grammar contains non-standard function statement, meaning function evaluated @ run-time, not @ parse time, happens functiondeclarations. in implementations first function defined.

---

functions can declared in different ways, compare following:

1- function defined function constructor assigned variable multiply:

var multiply = new function("x", "y", "return x * y;"); 

2- function declaration of function named multiply:

function multiply(x, y) {     return x * y; } 

3- function expression assigned variable multiply:

var multiply = function (x, y) {     return x * y; }; 

4- named function expression func_name, assigned variable multiply:

var multiply = function func_name(x, y) {     return x * y; };