DEV Community

Cover image for Explore the lexical Environment & Environment Record in Javascript 2021
Yogesh Yadav for CodeScoop.dev

Posted on • Updated on • Originally published at codescoop.hashnode.dev

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: <...>    
}
Enter fullscreen mode Exit fullscreen mode

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

Lexical Environment in Global Scope

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: <...> 
}
Enter fullscreen mode Exit fullscreen mode

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

Environment Record in Global Scope

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
}
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)