Why the following code will return “obvious”, “surprise!” (and lastly “how e?”). It should return "expected", isn't it?
In the first if we used anonymous functions, in the second we used 'named' functions.

var a = 5;
if (a == 5) {
    var b = function () {
        return "obvious";
    };
} else {
    var b = function () {
        return "never";
    };
}

if (a == 5) {
    function c() {
        return "expected";
    }
} else {
    function c() {
        return "surprise!";
    }
    function d() {
        return "how e?";
    }
}

alert(b());
alert(c());
alert(d());

So this means, function a(){} is NOT equal to var a = function (){}.

So, the second question, why JS needs this peculiar behavior? What's the benefit of this ?

Why the following code will return “obvious”, “surprise!” (and lastly “how e?”). It should return "expected", isn't it?
In the first if we used anonymous functions, in the second we used 'named' functions.

var a = 5;
if (a == 5) {
    var b = function () {
        return "obvious";
    };
} else {
    var b = function () {
        return "never";
    };
}

if (a == 5) {
    function c() {
        return "expected";
    }
} else {
    function c() {
        return "surprise!";
    }
    function d() {
        return "how e?";
    }
}

alert(b());
alert(c());
alert(d());

So this means, function a(){} is NOT equal to var a = function (){}.

So, the second question, why JS needs this peculiar behavior? What's the benefit of this ?

• javascript
• jquery

Share Improve this question Follow asked Mar 27, 2012 at 1:27 FilkorFilkor 64266 silver badges1818 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

No, it shouldn't, because the semantics of function definition statements are not what you apparently think they are.

Function definition statements are always hoisted up to the top of the enclosing function (or scope). When there's more than one function definition statement with the same name, the last one wins. It's not a dynamic execution-time thing. Putting function definition statements inside conditional code blocks should really be syntactically forbidden, but it itsn't. Just don't do it.

You can of course use function instantiation expressions to create function objects that you assign to variables. That would work as you expect.

All variable declarations and function declarations are hoisted to the top of the scope, in this case the top of the script. This means the code is interpreted as if it was,

var a,b;
function c() { 
    return "expected"; 
} 
function c() { 
    return "surprise!"; 
} 
function d() { 
    return "how e?"; 
} 

a = 5; 
if (a == 5) { 
    b = function () { 
        return "obvious"; 
    }; 
} else { 
    b = function () { 
        return "never"; 
    }; 
} 

if (a == 5) { 
} 
else { 
} 

alert(b()); 
alert(c()); 
alert(d()); 

Note that the last if statement is empty as all the function declarations they contained were hoisted. The second declaration of the function c obscures the first.

I remend you avoid using funciton declaration syntax in a block statement. It is techincally not legal JavaScript but every browser supports it even though it leads to confusion as you have noted.

function a(){} is NOT equal to var a = function (){}.

Correct. This has never been the case.

So, the second question, why JS needs this peculiar behavior? What's the benefit of this ?

JavaScript hoists function declarations to allow function declared later in the script to be used by function earlier in a script. This allows much more flexiblity in code organization.

@Pointy is correct. Function c() and d() are being declared before the first if statement is being evaluated. That's why when you call the alerts, they do what they do.