javascript - Hoisting of functions inside conditionals

Question

I understanding how hoisting in javascript occurs, functions are hoisted before variables, and only the declarations are hoisted. But When I came across hoisting inside if/else conditionals, like this one:

foo(); // "b is the output"
var a = true;

if (a) {
  function foo() { console.log("a"); }
}
else {
  function foo() { console.log("b"); }
}

Now the conditional is true, so according to the if block, a should have been the output, but due to some kind of hoisting I assume b is the output.

So how is b the output?

Answer 1

In JavaScript, variables, function expressions and function declarations are hoisted to the top of the scope.

Function declarations defines a named function variable without requiring variable assignment.

And important to know is that the entire body of the function declaration gets hoisted up the scope.

E.g.

function outerFunction() {
    console.log(typeof functionDeclaration); // outputs "function"

    function functionDeclaration() {
        // ... function body
    }
}

This is because, because of hoisting the code runs like so:

function outerFunction() {
    function functionDeclaration() {
        // ... function body
    }

    console.log(typeof functionDeclaration); // outputs "function"
}

In your case, the last function declaration for foo is hoisted to the top of the scope overriding all the other function declarations. Therefore, it logs "b".

Variables and function expressions, however, get hoisted without their assigned values.

E.g.

function outerFunction() {
    console.log(functionExpression); // outputs "undefined"      

    var functionExpression = function () {
        // ... function body
    }
}

Runs more like so,

function outerFunction() {
    var functionExpression = undefined;

    console.log(functionExpression); // outputs "undefined"

    functionExpression = function () {
        // ... function body
    }
}