Explore the lexical Environment & Environment Record in Javascript 2021

Let's first understand the Lexical Environment & Environment Record as per different versions of ECMAScript Specification.

From ES2015 till ES2020 Specification:-

Lexical Environment:

• A lexical environment is a specification type used to define the association of Identifiers to specific variables and functions, based upon the lexical nesting structure of your code.
• A lexical environment consists of two components:

  1. Environment Record

     It records the identifier bindings that are created within the scope of its associated Lexical Environment. It is referred to as the Lexical Environment's EnvironmentRecord.

  2. Outer Reference

     A reference to outer environment (null in the global environment).

A conceptual view using pseudo-code:

executioncontext.environment = {
    environmentRecord: { 
    // storage
    <identifier> : <value>
    <identifier> : <value>
    }
    // reference to the parent environment
    outer: <...>    
}

Note: - The [[Environment]] created inside Execution Context is of type Lexical Environment
[refer ES2020]

According to 12th Edition ECMAScript2021 Specification:

Environment Record

• A Environment Record is a specification type used to define the association of Identifiers to specific variables and functions, based upon the lexical nesting structure of your code.
• Every Environment Record has one component:

  1. Outer Reference

     An [[OuterEnv]] field, which is either null or a reference to an outer Environment Record. A conceptual view using pseudo-code:

executioncontext.environment = {
    // storage
    <identifier> : <value>,
    <identifier> : <value>,
    // reference to the parent environment
    outer: <...> 
}

Note: - The [[Environment]] created inside Execution Context is of type Environment Record [refer ES2021]

Let's also understand the Structure of execution context

Execution Context:

• An execution context is a specification device that is used to track the runtime evaluation of the code.
• To keeps the track of execution progress of its associated code, it needs various state components like LexicalEnvironment, VariableEnvironment, etc.

In pseudo-code:

ExecutionContext = {
    VariableEnvironment: { ... },
    LexicalEnvironment: { ... },
    // other components
}

Note:

Till ES2020	From ES2021
- The LexicalEnvironment component and VariableEnvironment component of an execution context are always Lexical Environments [refer ES2020]	- The LexicalEnvironment component and VariableEnvironment components of an execution context are always Environment Records [refer ES2021]

Summary

Let's have a quick recap of all the steps we perform in the above code snippet.

1. In ECMAScript2021, the [[environment]] which is created inside the execution context is of type Environment Record instead of Lexical Environment.
2. So, The LexicalEnvironment component and VariableEnvironment components of an execution context are always Environment Records.

Wrap Up!!

Thank you for your time!! Let's connect to learn and grow together.
Github Twitter