Javascript variable and function hoisting

Question

david sharif made a JS quiz which pretty much looks like-

var foo=1;    

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

typeof bar();//?

In my understanding, functions are hosited first and then variable declared inside. the hosited form of the function would be something like (correct me if i am wrong)-

var foo=1; 

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

  return foo;
  foo=10;
  foo =5;
}
typeof bar();//?

why typeof bar() is function not undefined?

Is this because of, at the time of function execution, it finds the first foo (which is a function) and returns happily without continuing search. Or something else?

Appreciate your time.

Answer 1

I found the answer in David Shariff blog.

"Shamelessly copied from his blog"-

Even though foo is declared twice, we know from the creation stage that functions are created on the activation object before variables, and if the property name already exists on the activation object, we simply bypass the declaration.

Therefore, a reference to function foo() is first created on the activation object, and when we get interpreter gets to var foo, we already see the property name foo exists so the code does nothing and proceeds.

If this sound like greek, read the whole blog

Answer 2

The Function Declaration "shadows" the var statement.

Paste this in to your console:

var foo = function(){}
var foo
typeof foo

This is how the code "looks like" to the Interpreter after compiletime:

var bar = function bar(){
  var foo = function foo(){}
  foo
  return foo;
  // never reached
  foo = 10;
  foo = 5;
}
var foo;
foo = 1    
typeof bar();//"function"

Answer 3

Function declarations are evaluated upon entry into the enclosing scope, before any step-by-step code is executed. The function's name (foo) is added to the enclosing scope (technically, the variable object for the execution context the function is defined in).

Example 1

From this example wecan see that even we are declaring foo after the return statement, we can still get foo returned.

function bar() {
  return foo;
  function foo() {} // this will get initialized before the return statement.
}
console.log(typeof bar()); // this will be function

Example 2

From this example we can see that if we are declaring our variables in a normal way after the return statement, they will not execute(assigned).

Declare function after return.

function bar() {
  return foo;
  var foo = function() {} // this will not get assigned
}
console.log(typeof bar()); // this will be undefined

Declare number after return

function bar() {
  return foo;
  var foo = 12; // this will not get assigned
}
console.log(typeof bar()); // this will be undefined

Example 3

Now let's walk through a messier example line-by-line.

function bar() {
  return foo;
  function foo() {}  // <-- initialize foo as a function
  var foo = 11;      // <-- this will not get assigned
}
console.log(typeof bar());  // function

I hope the above example will not only answer you question but also give you a better understanding of:

var foo = function() {} vs function foo() {}