If I declare a variable in a function using var then a slot for that variable is added to the LexicalEnvironment defined by that function.

function() {
  var foo; 
}

In the above code the LexicalEnvironment associated with the function contains a slot with a key foo and a value of undefined.

If I use a block-scoped declaration, how is the surrounding LexicalEnvironment affected?

function() {
  {
    let foo; // How does this affect the LexicalEnvironment?
  }
}

If I declare a variable in a function using var then a slot for that variable is added to the LexicalEnvironment defined by that function.

function() {
  var foo; 
}

In the above code the LexicalEnvironment associated with the function contains a slot with a key foo and a value of undefined.

If I use a block-scoped declaration, how is the surrounding LexicalEnvironment affected?

function() {
  {
    let foo; // How does this affect the LexicalEnvironment?
  }
}

• javascript
• ecmascript-6

Share Improve this question Follow edited Apr 2, 2015 at 10:58 mohamedrias 18.6k33 gold badges4040 silver badges4747 bronze badges asked Apr 2, 2015 at 10:06 Ben AstonBen Aston 55.8k6969 gold badges220220 silver badges349349 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

function() {
  var foo; 
}

As you mentioned, foo is available in the LexicalEnvironment is global to all inner functions within that function.

But

function() {
  {
    let foo; // How does this affect the LexicalEnviroinment?
  }
}

Here foo is local to that block alone. It won't be visible outside that block.

How does it affect the LexicalEnvironment ?

If you are referencing, foo anywhere inside that block, the local let foo will override the global var foo which you've defined in that function.

With respect to ES6,

function example(x) {
    console.log(y); // ReferenceError: y is not defined
    if (x) {
        let y = 5;
    }
}

Variables declared with a let statement are created as bindings on the lexical environment, rather than the variable environment, of the current execution context. A change to the specification of block statements in ES6 means that each block has its own lexical environment. In the above example, a new lexical environment is created when the block (the body of the if statement) is evaluated. When the let statement is evaluated a binding is added to this lexical environment and is innaccessible from the outer lexical environment (that of the function declaration itself).

Refer

Questions like this are best be answered by looking at the spec:

Block : { StatementList }

1. Let oldEnv be the running execution context’s LexicalEnvironment.
2. Let blockEnv be NewDeclarativeEnvironment(oldEnv).
3. Perform BlockDeclarationInstantiation(StatementList, blockEnv).
4. Set the running execution context’s LexicalEnvironment to blockEnv.
5. Let blockValue be the result of evaluating StatementList.
6. Set the running execution context’s LexicalEnvironment to oldEnv.
7. Return blockValue.

NOTE: No matter how control leaves the Block the LexicalEnvironment is always restored to its former state.

So what happens here?

When the block is evaluated, a new lexical environment is created, with the current lexical environment as "parent". The new environment replaces the current environment for the duration of evaluating the block.

If I use a block-scoped declaration, how is the surrounding LexicalEnvironment affected?

Other than it is temporarily replaced, it is not affected at all.