function statement and function expression inside if statement

Question

Any reason why the following snippet shows different output in Firefox and Chrome:

var sayHo;
console.log(typeof(sayHey));
console.log(typeof(sayHo));
if(true) {
    function sayHey() {
        console.log("Hey, inside if");
    };
    sayHo = function() {
        console.log("Ho, inside if");
    };
}
else {
    function sayHey() {
       console.log("Hey, inside else");
    };
    sayHo = function() {
       console.log("Ho, inside else");
    };
}
sayHey();
sayHo();

Chrome(v31) outputs

function
undefined
Hey, inside else
Ho, inside if

Firefox(v26) outputs

undefined
undefined
Hey, inside if
Ho, inside if

I expected the same output what Chrome gave. During parse time, the function declaration inside will override the function declaration inside if. Because JavaScript will try to hoist both the function declarations, hence the override.

Function "statements" (formally named declarations) are not valid inside if statements. More info is available here: kangax.github.io/nfe/#function-statements — Šime Vidas
– Šime Vidas, Commented Dec 29, 2013 at 13:51
@DevendraLattu Since function declarations nested inside if statements is non-standard, browsers can implement it anyhow they like, hence the differences. — Šime Vidas
– Šime Vidas, Commented Dec 29, 2013 at 13:54

aychedee · Accepted Answer · 2013-12-29 14:00:32Z

2

Firefox and Chrome use different JavaScript engines (SpiderMonkey and V8 respectively). The Chrome behaviour can be considered either a 'bug' or an 'ease of use feature'. In V8 function definitions inside if statements (rather than assignment of an anonymous function to a variable) are performed pre-execution. It's a design decision.

edited Dec 29, 2013 at 14:00

answered Dec 29, 2013 at 13:54

aychedee

25.7k8 gold badges82 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Anup Vasudeva Over a year ago

Any reason why you consider the behavior of Firefox an error?

Šime Vidas Over a year ago

Function declarations are evaluated pre-execution in all engines. The reason why Firefox doesn't evaluate the func declaration here is because it is nested within an if-statement which is not valid in JavaScript. The proper response would be to throw a syntax error, however that would "break the web", so Firefox decided to delay evaluation instead. Chrome on the other hand decided to treat it as an non-nested func declaration.

aychedee Over a year ago

Yeah, I should edit the answer to be clear about that rather than just assuming it's obvious from the context of the question.

Anup Vasudeva Over a year ago

Thanks aychedee and Sime Vidas for the explanation.

Royi Namir · Accepted Answer · 2013-12-29 14:30:52Z

It all boils down to hoisting differences :

Function declarations and variable declarations are always moved (“hoisted”) invisibly to the top of their containing scope by the JavaScript interpreter. Function parameters and language-defined names are, obviously, already there. This means that code like this:

function foo() {
    bar();
    var x = 1;
}

is actually interpreted like this:

function foo() {
    var x;
    bar();
    x = 1;
}

Consider this example :

function test() {
    foo(); // TypeError "foo is not a function"
    bar(); // "this will run!"
    var foo = function () { // function expression assigned to local variable 'foo'
        alert("this won't run!");
    }
    function bar() { // function declaration, given the name 'bar'
        alert("this will run!");
    }
}
test();

this code is equivalent to :

  function test() {

        function bar() { // function declaration, given the name 'bar'
            alert("this will run!");
         }
        foo(); // TypeError "foo is not a function"
        bar(); // "this will run!"
        var foo = function () { // function expression assigned to local variable 'foo'
            alert("this won't run!");
        }

    }
    test();

Look what happened to the function declaration : it is hoisted.

Leet's look at simplier sample : http://jsbin.com/UKICENE/4/edit

console.log(typeof(sayHey));

if(true) {
    function sayHey() {
        console.log("Hey, inside if");
    };}

sayHey();

This will yield function in chrome.

But it will yield undefined in FF.

Hoeever - deferring the calculationm via setTimeout will yield the same result as chrome :

console.log(typeof(sayHey));//undefined

setTimeout(function (){console.log(typeof(sayHey));},1000); //function

if(true) {
    function sayHey() {
        console.log("Hey, inside if");
    };}

sayHey();

So , like Šime said , it delay the evaluation.

If you ask me , I think chrome is doing the right thing

Collectives™ on Stack Overflow

function statement and function expression inside if statement

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related