Evaluation order of function declarations

Question

With the following code, which is neither ES6, nor is it in "strict mode", I had expected an outcome of 'b' because the second declaration of foo should overwrite the first one. But the outcome is 'a'!

{
  function foo() {
    console.log('a');
  }
}

function foo() {
  console.log('b');
}

foo(); // 'a' ? Why not 'b'?

When this code is surrounded with additional curly braces, the outcome is the expected 'b'.

{ // additional curly braces

  {
    function foo() {
      console.log('a');
    }
  }

  function foo() {
    console.log('b');
  }

  foo(); // 'b' as expected!

} // end additional curly braces 

For further illustration, please consider the following additional example:

foo('before declaration'); // outcome:  from outside block :before declaration

{
  function foo(s) {
    console.log('from inside block: ' + s);
  }
}

function foo(s) {
  console.log('from outside block :' + s);
}

foo('after declaration'); // outcome:  from inside block: after declaration

In my opinion the correct outcome should be:

// from outside block :before declaration
// from outside block :after declaration

I'm unable to spot my misconception here.

If I again enclose the complete last example inside curly brackets like so:

{
  foo('before declaration'); // outcome:  from outside block :before declaration

  {
    function foo(s) {
      console.log('from inside block: ' + s);
    }
  }

  function foo(s) {
    console.log('from outside block :' + s);
  }

  foo('after declaration'); // outcome:  from outside block: after declaration
}

I get the expected outcome.

Answer 1

In your first declaration, you have enclosed foo() within {} , which changes the scope for the declaration, but the next declaration is the global scope. From w3schools JavaScript Hoisting,

Hoisting is JavaScript's default behavior of moving all declarations to the top of the current scope

So your second declaration is actually moved to top, and then the declaration inside the scope {} executes, which overrides the first declaration and prints a.

Answer 2

I had expected an outcome of 'b' because the second declaration of foo should overwrite the first one.

No, it's not that the second declaration should overwrite the first one. The expected outcome would be 'b' because the first declaration is contained in its own (block) scope and would not affect the outer scope.

But the outcome is 'a'! Why not 'b'????

Because you are not executing the code in strict mode (you really should!). And in sloppy mode, web browsers behave weird to be compatible with older engines that treated the then-illegal function statements in ES5 specially.

So what is happening here? The block-scoped function declaration does, when the statement is evaluated, assign the function to a top-level variable of the same name. (That happens in addition to the normal scoped (and "hoisted") declaration).

Your first example therefore behaves like

var foo₀; // the top-level implicit introduction of the inner declaration
var foo₀ = function foo() { console.log('b'); } // the hoisted declaration
foo()₀; // logs 'b'
{
  let foo₁ = function foo() { console.log('a'); } // the (hoisted) inner declaration
  foo₀ = foo₁; // the weirdness!
  // a call to `foo()` in here would get you foo₁ from the local scope
}
foo()₀; // logs 'a'

Your second example behaves as

var foo₀; // the top-level implicit introduction of the first declaration
var foo₀; // the top-level implicit introduction of the second declaration
{
  let foo₁ = function foo() { console.log('b'); } // the (hoisted) second declaration
  foo()₁; // logs 'b'
  {
    let foo₂ = function foo() { console.log('a'); } // the (hoisted) first declaration
    foo₀ = foo₂; // the weirdness!
    // a call to `foo()` in here would get you foo₂ from the local scope
  }
  foo₀ = foo₁; // the weirdness!
  foo₁() // logs 'b' (as expected) - a call in here does get you foo₁ from the local scope
}
// a call to `foo()` out here would get you foo₀ from the top scope

Answer 3

Having multiple definitions of the same function in a single scope is not supported unless they are at top level.

The reason is that there is a big difference between for example:

function square(x) { return x*x; }

and

var square = function(x) { return x*x; }

where in the first case the name square is bound to the function object at start and not when the definition is "executed" during the normal program flow:

function foo() {
    console.log(square(12));  // Valid, no prob the function is defined "later"
    function square(x) { return x*x; }
}

this however implies that if you place different definitions in the same scope it's not clear what should be done.

The standard describes what should happen only for multiple definitions at top level (last wins).

What to do in nested parts is instead not defined and different implementations (e.g. Firefox and Chrome) do not agree. What is clearly nonsense is for example placing two definitions for the same function in the two branches of an if-else statement (remember that the name binding must happen immediately, before statements in the scope begin execution).

Just don't do that.