JavaScript function x(){..} treated as var x=function(){..} inside `if' in Firefox, not in Chrome and Opera

Question

Consider the following JavaScript code:

(function(){
  foo();
  function foo(){ alert('Hello, World!'); }
})();

In Firefox, Opera and Chrome, this behaves as expected; we get an alert. Now in contrast:

(function(){
  if (true){
    foo();
    function foo(){ alert('Hello, World!'); }
  }
})();

Firefox 3.6 and 4 (beta) (i.e. SpiderMonkey for both) throws an exception: foo is not defined

Chrome (i.e. V8) and Opera (i.e. whatever engine Opera uses) work as expected (by me).

Which is the correct behaviour, or is this left to implementations to decide?

FWIW, wrap it up in a function again and it's good to go in FF again:

(function(){
  if (true){
    (function(){
      foo();
      function foo(){ alert('Hello, World!'); }
    })();
  }
})();

I think you will find your answer here: http://stackoverflow.com/questions/4069100/why-cant-i-use-a-javascript-function-before-its-definition-inside-a-try-block — Felix Kling, Mar 07 '11 at 08:54
Thanks, Felix. That lead me to here: http://www.jibbering.com/faq/#functionStatement — Christopher Done, Mar 07 '11 at 09:48
See also http://whereswalden.com/2011/01/24/new-es5-strict-mode-requirement-function-statements-not-at-top-level-of-a-program-or-function-are-prohibited/ — Neil, Mar 17 '11 at 22:01

score 2 · Accepted Answer · answered Mar 07 '11 at 10:00

According to the ECMA-262 5th Edition spec, SourceElement is defined to be:

SourceElement :
Statement 
FunctionDeclaration

So, FunctionDeclarations and Statements are different. And blocks (e.g. if) can only contain Statements:

Block :
   { StatementList opt }

StatementList :
   Statement
   StatementList  Statement

So, no FunctionDeclarations in ifs, grammatically, according to the spec. However, according to the comp.lang.javascript FAQ, Mozzila browsers and others implement a "function statement". This is allowed under section 16 of ECMA-262, Editions 3 and 5. Spidermonkey adds FunctionStatement. JScript adds FunctionDeclaration, however, JScript also has JScriptFunction. It appears the behaviour is left to implementations to decide.

Example of nonstandard FunctionStatement:

try {
  function Fze(b,a){return b.unselectable=a}
  /*...*/
} catch(e) { _DumpException(e) }

Example of FunctionExpression:

var Fze;
try {
  Fze = function(b,a){return b.unselectable=a};
  /*...*/
} catch(e) { _DumpException(e) }

Example of FunctionDeclaration:

function aa(b,a){return b.unselectable=a}

This is correct: all browsers implement their own extensions to the ECMAScript standard to handle what looks like a function declaration within a block. — Tim Down, Mar 07 '11 at 10:18

score 1 · Answer 2 · answered Mar 07 '11 at 08:51

1

This is due to different parsing symantec different browsers are using. Usually first declaration is evaluated. Since if condition encapsulate the declaration of foo method, it is not parsed. Ideally you should not create runtime conditional methods.

answered Mar 07 '11 at 08:51

hungryMind

6,931
4
29
45

score 1 · Answer 3 · answered Mar 07 '11 at 08:58

foo isn't parsed until the if statement is executed - And even within the if statement you're calling it before defining it. Although as you've said it works in Chrome etc. I would expect the behavior that FF exhibits if I was writing code like that.

I hope for the sake of maintainability you're not writing code like this - That's a confusing mess.

score 0 · Answer 4 · answered Mar 07 '11 at 09:08

0

To be on a safe side write code this way:

var foo = function() { alert('Hello, World!'); } foo();

inside (function(){ })() block you'll get true private methods.

answered Mar 07 '11 at 09:08

KIR

5,614
1
31
23

JavaScript function x(){..} treated as var x=function(){..} inside `if' in Firefox, not in Chrome and Opera

4 Answers4