How does this hoisting work with block scope? [duplicate]

Question

I've been asked about a question

{
  function foo() {
    console.log('A');
  }
  
  foo();
  
  foo = 1;
  
  function foo() {
    console.log('B');
  }
  
  foo = 2;

  console.log(foo);
}
console.log(foo);

Why the third output is 1 instead of 2?

---

There should be no block scoped foo being created since there is neither let nor const in that block. But the second foo output is 2 means there is indeed another reference of foo has been created.

What is going on?

P.S. I'm using Chrome Version 89.0.4389.90 (Official Build) (x86_64).

Answer 1

---

According to the web compat semantics at the place of the function declaration, the value of the blocked scope variable is bound to the outer scope². This code is equivalent to:

let outerFoo; // the functions create a binding outside of the scope

{
  let innerFoo; // but also inside
  // due to hoisting, functions get bound before any code get's executed:
  innerFoo = function foo() {
    console.log('A');
  };
  innerFoo =   function foo() {
    console.log('B');
  };
  
  // At the place of the function declaration, the variable leaves the scope
  /* function foo() {
    console.log('A');
  } */
  outerFoo = innerFoo;

  innerFoo();
  
  innerFoo = 1;
  
  // this also applies to the second declaration
  /* function foo() {
    console.log('B');
  } */
  outerFoo = innerFoo;
  
  innerFoo = 2;

  console.log(innerFoo);
}
console.log(outerFoo);

²This is basically exactly how the specification describes it:

When the FunctionDeclaration f is evaluated, perform the following steps in place of the FunctionDeclaration Evaluation algorithm provided in 15.2.6:
a. Let fenv be the running execution context's VariableEnvironment.
b. Let benv be the running execution context's LexicalEnvironment.
c. Let fobj be ! benv.GetBindingValue(F, false).
d. Perform ! fenv.SetMutableBinding(F, fobj, false).

The specification additionally states:

Prior to ECMAScript 2015, the ECMAScript specification did not define the occurrence of a FunctionDeclaration as an element of a Block statement's StatementList. However, support for that form of FunctionDeclaration was an allowable extension and most browser-hosted ECMAScript implementations permitted them. Unfortunately, the semantics of such declarations differ among those implementations. Because of these semantic differences, existing web ECMAScript code that uses Block level function declarations is only portable among browser implementation if the usage only depends upon the semantic intersection of all of the browser implementations for such declarations

So Safari is probably doing it the way it always did it, while Chrome (and Firefox) follow the specification.

Answer 2

This is an analysis of what's happening with a debugger in Node.js. It doesn't explain why this is happening.

There are 3 scopes involved: local scope, global scope and block scope.

I did the same analysis in a Chrome browser. The behavior was similar with the only difference that there is no local scope and instead of the local scope the global scope was used.

The code

{
    foo = 1;
    foo = 2;
    console.log(foo);
}
console.log(foo);

creates a variable in global scope and sets two different values for that variable. In this code

{
    function foo() { }
    foo = 1;
    foo = 2;
    console.log(foo);
}
console.log(foo);

the line function foo() { } creates a variable foo in block scope and a variable foo in local scope (global scope in Chrome). Since there exists a variable in block scope foo = 1; sets a value for the existing variable in block scope and doesn't create a variable in global scope. foo = 2; sets a different value for the same variable. The first console.log(foo); prints 2 from block scope and the second console.log(foo); prints f foo() { } from local scope (global scope in Chrome).

In this code

{
    foo = 1;
    function foo() { }
    foo = 2;
    console.log(foo);
}
console.log(foo);

the function declaration function foo() { } is hoisted and creates a variable foo in block scope with value f foo() {} and a variable foo in local scope (global scope in Chrome) with value undefined. The line foo = 1; sets both variables to 1. The line foo = 2; sets the variable in block scope to 2. The first console.log(foo); prints 2 from block scope and the second console.log(foo); prints 1 from local scope (global scope in Chrome).

In this code

{
    function foo() { }
    foo = 1;
    function foo() { }
    foo = 2;
    console.log(foo);
}
console.log(foo);

the function declaration function foo() { } creates a variable foo in block scope with value f foo() {} and a variable foo in local scope (global scope in Chrome) with value f foo() {}. The line foo = 1; sets both variables to 1. The line foo = 2; sets the variable in block scope to 2. The first console.log(foo); prints 2 from block scope and the second console.log(foo); prints 1 from local scope (global scope in Chrome).