Variable Environment vs lexical environment

Question

I need to understand the difference between Variable Environment vs lexical environment in JavaScript. Actually I go through some notes available in stackoverflow and the doc but they are very hard to understand.I would be happy if you can explain it to me simply due my bad English knowledge

Answer 1

Note

This answer relates to ECMA-262 ed 5.1. Later editions have modified the description of variable and lexical environments to accommodate lexical scoping of let and const (which are both block scoped).

According to ECMA-262 §10.3, variable environment is a certain type of lexical environment. Both are "specification types" that are used solely to describe features of ECMAScript. You can't access them or modify them directly in anyway, and ECMAScript implementations don't have to implement them in any specific way, they just have to behave as if they were implemented per the specification.

A lexical environment consists of an environment record, which can be thought of as an object whose properties are the variable and function names declared within the associated execution context. It also has, for functions, identifiers from the formal parameter list in the function declaration or expression (e.g. function foo(a, b){} effectively declares a and b as variables on foo's environment record).

A lexical environment also has a link to any outer lexical environment (i.e. its scope chain), so it is used to resolve identifiers outside the current an execution context (e.g. global variables from within a function). They can be associated with other structures besides functions and execution contexts, e.g. try..catch and with statements.

A variable environment is just the part of a lexical environment within the execution context, essentially just the variables and functions declared within the current context.

Anyone who wants to correct the above, please chime in.

Answer 2

LexicalEnvironment and VariableEnvironment are what keep track of variables during runtime and correspond to block scope and function/module/global scope respectively. Here's an example based on my reading of the spec http://www.ecma-international.org/ecma-262/6.0/

0:  function do_something() {
1:     var a = 1;
2:     let b = 2;
3:     while (true) {
4:         var c = 3;
5:         let d = 4;
6:         console.log(b);
7:         break;
8:     }
9:  }
10:
11: do_something();

When we first call do_something() it creates an ExecutionContext.

ExecutionContext:
    LexicalEnvironment:
        b -> nothing
        outer: VariableEnvironment //here should VariableEnvironment
    VariableEnvironment:
        a -> undefined, c -> undefined
        outer: global
    ...

Entering the while loop creates a new lexical environment:

ExecutionContext:
    LexicalEnvironment:
        d -> nothing
        outer:
            LexicalEnvironment
                b -> 2
                outer: global
    VariableEnvironment:
        a -> 1, c -> undefined
        outer: global
    ...

Now when we look up variables, we can always fall back on whatever is contained in outer. This is why you can access global variables from within functions. It is also why we can access console.log(b) from within the while block even though it lives in the outer scope.

When we leave the while block we restore the original lexical environment.

ExecutionContext:
    LexicalEnvironment
        b -> 2
        outer: global
    VariableEnvironment:
        a -> 1, c -> 3
        outer: global

Therefore d is no longer accessible.

Then when we leave the function we destroy the execution context.

I think that's the gist of it.

Although this explanation is based on ECMA-262 6.0 because of let, the LexicalEnvironment is defined similarly in 5.1 where it's used to temporarily bind variables in with, and in the catch clause of a try/catch.