How hoisting name resolution order works in JavaScript?

Question

I came across a interesting quiz

function bar() {
    return foo;
    foo = 10;
    function foo() {}
    var foo = '11';
}
alert(typeof bar());

My interpretation is like this (Which is wrong according to console :) ):

var foo; // global variable
function bar(){
    function foo(){}
    var foo;  //  Here variable foo should override foo function 
    return foo; // (according to me foo should be variable with undefined value) What is going on here, How JavaScript resolve naming order ?
    foo = 10;
    foo = "11";
}

Here is a reference which I am reading this

In JavaScript, a name enters a scope in one of four basic ways: 1.Language-defined: All scopes are, by default, given the names this and arguments. 2. Formal parameters: Functions can have named formal parameters, which are scoped to the body of that function. 3. Function declarations: These are of the form function foo() {}. 4. Variable declarations: These take the form var foo;

He later quoted :

The most important special case to keep in mind is name resolution order. Remember that there are four ways for names to enter a given scope. The order I listed them above is the order they are resolved in. In general, if a name has already been defined, it is never overridden by another property of the same name. This means that a function declaration takes priority over a variable declaration. This does not mean that an assignment to that name will not work, just that the declaration portion will be ignored.

Which is confusing for me, Can anyone simplify this with reference to above example ? Main point I want to know :

• How variables without var inside a function hoisted ?
• Does variable overriding occurs during hoisting ?

Answer 1

Lets leave the function foo for the moment. Within a function, if a variable is declared anywhere inside that function, the declaration will be moved to the top of the function. So, it is actually evaluated like this

function bar() {
    var foo;
    return foo;
    foo = 10;
    foo = '11';
}

But when you have a function declared by the same name, it will take precedence and it will be evaluated similar to this

function bar() {
    var foo = function() {};
    return foo;
    foo = 10;
    foo = '11';
}

That is why you are getting function in the alert box.

Answer 2

Any variable without var inside a function becomes a global variable by default.

when you have a function declaration inside another function(like in your example), it gets hoisted first followed by the variable declarations.

examples to demonstrate variable overriding.

function bar() {
    var foo = 10;
    function foo() {}
    return foo;
}

bar(); //--> returns 10;

function bar() {
   var foo;
   function foo() {}
   return foo;
}

bar(); //--> returns the function object foo.