StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>It doesn't work because it is being parsed as a <strong><code>FunctionDeclaration</code></strong>, and the name identifier of function declarations is <em>mandatory</em>.</p> <p>When you surround it with parentheses it is evaluated as a <strong><code>FunctionExpression</code></strong>, and function expressions can be named or not.</p> <p>The grammar of a <code>FunctionDeclaration</code> looks like this:</p> <pre><code>function Identifier ( FormalParameterListopt ) { FunctionBody } </code></pre> <p>And <code>FunctionExpression</code>s:</p> <pre><code>function Identifieropt ( FormalParameterListopt ) { FunctionBody } </code></pre> <p>As you can see the <code>Identifier</code> (Identifier<strong>opt</strong>) token in <code>FunctionExpression</code> is optional, therefore we can have a function expression without a name defined:</p> <pre><code>(function () { alert(2 + 2); }()); </code></pre> <p>Or <em>named</em> function expression:</p> <pre><code>(function foo() { alert(2 + 2); }()); </code></pre> <p>The Parentheses (formally called <a href="http://ecma262-5.com/ELS5_HTML.htm#Section_11.1.6" rel="noreferrer">the Grouping Operator</a>) can surround only expressions, and a function expression is evaluated.</p> <p>The two grammar productions can be ambiguous, and they can look exactly the same, for example:</p> <pre><code>function foo () {} // FunctionDeclaration 0,function foo () {} // FunctionExpression </code></pre> <p>The parser knows if it's a <code>FunctionDeclaration</code> or a <code>FunctionExpression</code>, depending on the <strong>context</strong> where it appears.</p> <p>In the above example, the second one is an expression because the <a href="http://ecma262-5.com/ELS5_HTML.htm#Section_11.14" rel="noreferrer">Comma operator</a> can also handle only expressions.</p> <p>On the other hand, <code>FunctionDeclaration</code>s could actually appear only in what's called "<code>Program</code>" code, meaning code outside in the global scope, and inside the <code>FunctionBody</code> of other functions.</p> <p>Functions inside blocks should be avoided, because they can lead an unpredictable behavior, e.g.:</p> <pre><code>if (true) { function foo () { alert('true'); } } else { function foo () { alert('false!'); } } foo(); // true? false? why? </code></pre> <p>The above code should actually produce a <code>SyntaxError</code>, since a <a href="http://ecma262-5.com/ELS5_HTML.htm#Section_12.1" rel="noreferrer"><code>Block</code></a> can only contain statements (and the ECMAScript Specification doesn't define any function statement), but most implementations are tolerant, and will simply take the second function, the one which alerts <code>'false!'</code>.</p> <p>The Mozilla implementations -Rhino, SpiderMonkey,- have a different behavior. Their grammar contains a <em>non-standard</em> Function Statement, meaning that the function will be evaluated at <em>run-time</em>, not at parse time, as it happens with <code>FunctionDeclaration</code>s. In those implementations we will get the first function defined.</p> <hr> <p>Functions can be declared in different ways, <a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Functions#Function_constructor_vs._function_declaration_vs._function_expression" rel="noreferrer">compare the following</a>:</p> <p>1- A function defined with the <a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Function" rel="noreferrer">Function</a> constructor assigned to the variable <em>multiply</em>:</p> <pre><code>var multiply = new Function("x", "y", "return x * y;"); </code></pre> <p>2- A function declaration of a function named <em>multiply</em>:</p> <pre><code>function multiply(x, y) { return x * y; } </code></pre> <p>3- A function expression assigned to the variable <em>multiply</em>:</p> <pre><code>var multiply = function (x, y) { return x * y; }; </code></pre> <p>4- A named function expression <em>func_name</em>, assigned to the variable <em>multiply</em>:</p> <pre><code>var multiply = function func_name(x, y) { return x * y; }; </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload