I've been reading about JavaScript hoisting sometime back.

JavaScript Scoping and Hoisting by Ben Cherry
Two words about “hoisting” by Dmitry Soshnikov

and, some more about JavaScript type-coercion, truth & false test: Truth, Equality and JavaScript and some other resource

And while practicing some, and found I m missing some important concept about the hoisting and a variable' truthy & falsy.

1: 'if' truth test with duplicate variable declaration

var foo = 1; 
function bar() { 
    if (!foo) { 
    alert('inside if');
        var foo = 10; 
    } 

} 
bar();

o/p: inside if

Doubt: 'foo' value being '1', if(!foo) should evaluates to false and that block should not be executed (quoting from above resources: hoisting affects only the var & function declaration, but not the execution). But why is that alert is shown. This is not the case if I directly use false (shown in the below no-tricks code: snippet #3)

2: 'if' truth test without duplicate variable declaration

var foo = 1; 
function bar() { 
    if (!foo) { 
        alert('inside if');
    } 

} 
bar();

o/p: no output; means control not entered 'if' block
This is what one could expect

3: 'if' using 'false' with duplicate variable declaration

var foo = 1; 
function bar() { 
    if (false) { 
        alert('inside if');
        var foo = 10; 
    } 
} 
bar();

o/p: no output; means control not entered 'if' block
This is what one could expect

Someone please clarify. Thanks

I've been reading about JavaScript hoisting sometime back.

JavaScript Scoping and Hoisting by Ben Cherry
Two words about “hoisting” by Dmitry Soshnikov

and, some more about JavaScript type-coercion, truth & false test: Truth, Equality and JavaScript and some other resource

And while practicing some, and found I m missing some important concept about the hoisting and a variable' truthy & falsy.

1: 'if' truth test with duplicate variable declaration

var foo = 1; 
function bar() { 
    if (!foo) { 
    alert('inside if');
        var foo = 10; 
    } 

} 
bar();

o/p: inside if

Doubt: 'foo' value being '1', if(!foo) should evaluates to false and that block should not be executed (quoting from above resources: hoisting affects only the var & function declaration, but not the execution). But why is that alert is shown. This is not the case if I directly use false (shown in the below no-tricks code: snippet #3)

2: 'if' truth test without duplicate variable declaration

var foo = 1; 
function bar() { 
    if (!foo) { 
        alert('inside if');
    } 

} 
bar();

o/p: no output; means control not entered 'if' block
This is what one could expect

3: 'if' using 'false' with duplicate variable declaration

var foo = 1; 
function bar() { 
    if (false) { 
        alert('inside if');
        var foo = 10; 
    } 
} 
bar();

o/p: no output; means control not entered 'if' block
This is what one could expect

Someone please clarify. Thanks

• javascript
• type-coercion
• truthiness
• hoisting

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked Jul 20, 2011 at 17:37 manikantamanikanta 8,50055 gold badges6161 silver badges6868 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

For your example number 1, the alert is shown because you're using var inside the function and the var declaration is hoisted to the top of the function, so it is equivalent to:

---

var foo = 1; 
function bar() {
    var foo;
    if (!foo) {
        alert('inside if');
        foo = 10; 
    } 

} 
bar();

One might conclude that these sorts of issues offer pelling reason to declare all variables explicitly at the top of the function.

Only variable declaration is eagerly evaluated. The variable assignment in your first case (in the if block) occurs only upon entering the if block.

The variable you only declare, but not assign any value to, has the value of undefined (which coerces to false).