How will the Lexical environment and the Variable Environment will look like at the following code

Question

I have been looking at ecma262 and I've seen that when we invoke a function we are basically calling the internal method [[Call]] and while I was looking at the steps of the [[Call]] I have found that in step 2 it calls to PrepareForOrdinaryCall and here is the interesting part.

7. Let localEnv be NewFunctionEnvironment(F, newTarget).
8. Set the LexicalEnvironment of calleeContext to localEnv.
9. Set the VariableEnvironment of calleeContext to localEnv.

PrepareForOrdinaryCall sets the LE and the VE to localEnv which is a newly created FunctionEnvironmentRecord.

Therefore, the LE and VE are pointing to the same ER.

Take a look at the following code:

function test(){
  let localVar = 5;
  var myVar = 10;
}

test();

My question is the let localVar is going to be part of the FunctionEnvironmentRecord which LE and VE are currently pointing to or it's going to create a new ER and set the LE to it and inside the new ER that LE pointing to it's going to store let localVar

Here some images to demonstrate it visually.

Example 1

is the let localVar is going to be part of the FunctionEnvironmentRecord which LE and VE are currently pointing to

---

Example 2

or it's going to create a new ER and set the LE to it and inside the new ER that LE pointing to it's going to store let localVar

Which one of those examples is the correct one?

Answer 1

PrepareForOrdinaryCall sets the LE and the VE to localEnv which is a newly created FunctionEnvironmentRecord.

Therefore the LE and VE are pointing to the same ER.

Yes. However at that step, no variables have been created.

Is the let localVar going to be part of the FunctionEnvironmentRecord which LE and VE are currently pointing to, or is it going to create a new ER and set the LE to it and inside the new ER store the localVar?

You won't like the answer, but it depends :-)

The interesting steps that are going to create these variables are not happening in PrepareForOrdinaryCall but in FunctionDeclarationInstantiation. In most ordinary functions, yes, the simple scenario 1 applies where both variables are created in the same environment record. (I would however point out that your image looks as if there were two separate environment records that both contained the two variables, you'll want to draw an object diagram with a single environment record object that is referenced as both the variable and lexical environment).

However, in functions that have default parameter initialisers, or functions that are not strict mode code, additional declarative environment records will be created and the execution context's LexicalEnvironment will be set to those. In particular,

"Step 20 - NOTE: A separate Environment Record is needed to ensure that bindings created by direct eval calls in the formal parameter list are outside the environment where parameters are declared."

"Step 28 - NOTE: A separate Environment Record is needed to ensure that closures created by expressions in the formal parameter list do not have visibility of declarations in the function body."

"Step 30 - NOTE: Non-strict functions use a separate Environment Record for top-level lexical declarations so that a direct eval can determine whether any var scoped declarations introduced by the eval code conflict with pre-existing top-level lexically scoped declarations. This is not needed for strict functions because a strict direct eval always places all declarations into a new Environment Record."

With these steps being executed, the execution context of test() will look more like in your second scenario. (Although the declarative environment record in your image is crucially missing the [[OuterEnv]] reference)

You can also use a block scope to create this setup explictly:

function test(){
  var myVar = 10;
  {
    let localVar = 5;
    debugger;
  }
}
test();