The reason for all that "dancing" is simple.
The identifier of named function expression needs to be made available within function scope but not outside.
typeof f; // undefined
(function f() {
typeof f; // function
})();
How do you make f
available within function?
You can't create binding in the outer Lexical Environment since f
shouldn't be available outside. And you can't create binding in the inner Variable Environment since... it's not yet created; the function is not yet executed at the moment of instantiation, and so 10.4.3 (Entering Function Code) step with its NewDeclarativeEnvironment has never happened.
So the way this is done is by creating an intermediate lexical environment that "inherits" directly from current one, and which is then passed as [[Scope]] into the newly created function.
You can see this clearly if we break steps in 13 into pseudo code:
// create new binding layer
funcEnv = NewDeclarativeEnvironment(current Lexical Environment)
envRec = funcEnv
// give it function's identifier
envRec.CreateImmutableBinding(Identifier)
// create function with this intermediate binding layer
closure = CreateNewFunction(funcEnv)
// assign newly created function to an identifier within this intermediate binding layer
envRec.InitializeImmutableBinding(Identifier, closure)
So the lexical environment within f
(when resolving identifier, for example) now looks like this:
(function f(){
[global environment] <- [f: function(){}] <- [Current Variable Environment]
})();
With anonymous function it would look like this:
(function() {
[global environment] <- [Current Variable Environment]
})();