Understanding JavaScript hoisting and truthy & falsy

hoisting, javascript, truthiness, type-coercion

Solution

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 compelling reason to declare all variables explicitly at the top of the function.

Problem

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

Original source