JS: Why does function declaration order matter when inside a conditional block?

Question

a();
function a() {
    $('.doit').text('Text was replaced (a)');   
}

if ($('.doit2').length) {
    b();
    function b() {
         $('.doit2').text('Text was replaced (b)');   
    }
}

a() is called correctly, while b gives an error "b is not defined". Why?

(I've read about hoisting but function b is declared, not a variable. Or am I wrong?)

See fiddle - Firefox is raising an error, while Chrome works.

Which browser are you using. It seem to work fine in chrome. [Fiddle](http://jsfiddle.net/qyjpwku5/) — Abhishek Prakash, Jul 16 '15 at 06:59
Could you create a fiddle to produce this problem? I don't see a problem with this, perhaps the problem is somewhere else in your code? Also could you provide what browser you are using? — Spencer Wieczorek, Jul 16 '15 at 07:05
Possible duplicate of http://stackoverflow.com/questions/23125529/need-to-understand-javascript-function-hoisting-example — Cerbrus, Jul 16 '15 at 07:07
Guys you rock. My fiddle had an typo so I thought Chrome does give this behavior as well ... — giraff, Jul 16 '15 at 07:16

score 1 · Accepted Answer · answered Jul 16 '15 at 07:12

By Javascript specs, function declarations are not allowed in conditionals (or any other blocks). Therefore, this is technically undefined behavior. Some browsers attempt to create a reasonable behavior. However, you shouldn't rely on browsers being able to interpret this correctly.

FunctionDeclarations are only allowed to appear in Program or FunctionBody. Syntactically, they can not appear in Block ({ ... }) — such as that of if, while or for statements.

http://kangax.github.io/nfe/#function-declarations-in-blocks

JS: Why does function declaration order matter when inside a conditional block?

1 Answers1