Lexical Environment in JavaScript Explained

Lexical Environment in JavaScript Explained

A lexical environment is the internal data structure the engine uses to manage scope. It consists of two parts: an environment record (the variables) and a reference to the outer environment (the parent scope).

What a Lexical Environment Contains

1. Environment record: stores the variable bindings (name -> value) for that scope.
2. Outer environment reference: a pointer to the parent lexical environment.

How It Is Created

Every time the engine enters a new scope (global, function, or block), it creates a new lexical environment:

• Global lexical environment: created once, has no outer reference.
• Function lexical environment: created on each function call, outer reference is the defining scope.
• Block lexical environment: created for each {} block with let/const, outer reference is the enclosing scope.

"Lexical" Means Written

The outer reference is determined by where the code is written (lexically), not where the function is called. This is why JavaScript is called lexically (statically) scoped.

const x = 10;
function outer() {
  function inner() {
    console.log(x); // 10, via inner -> outer -> global chain
  }
  inner();
}
outer();
``
`inner`'s outer reference points to `outer`'s environment, which points to the global environment. The chain is fixed at write time.

### Lexical Environment vs Variable Environment

In the spec, the **variable environment** holds `var` declarations and function declarations, while the **lexical environment** holds `let` and `const`. In practice, they are often the same object, but the distinction matters in edge cases (like `catch` blocks).

### Lexical Environment and Closures

When a function is returned or passed around, it keeps a reference to its lexical environment. That reference is what makes a closure work: the function can still access the variables in its lexical chain even after the outer function has returned.

### The Takeaway

A lexical environment is the engine's data structure for scope: an environment record (the variables) plus an outer reference (the parent). It is created per scope (global, function, block). "Lexical" means the outer reference is determined by where code is written, not where it is called. This is the foundation of the scope chain and closures.