Explore the lexical Environment & Environment Record in Javascript 2021
Tags: javascript, webdev, computerscience
Published: 2022-08-17 07:23:00

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

 
From [**ES2015**][1] till [**ES2020**][2] Specification:-
 
<h2>Lexical Environment: </h2>
   - 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. <h4>Environment Record</h4> 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. <h4>Outer Reference</h4> A reference to outer environment (null in the global environment).

A conceptual view using pseudo-code:

```javascript
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]][3]

<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oeq4770whr2mksmrwt0s.png" align="left" alt="Lexical Environment in Global Scope"> 

According to [**12th Edition ECMAScript2021**][4] Specification:
 
<h2>Environment Record </h2>
   - 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. <h4>Outer Reference</h4> An `[[OuterEnv]]` field, which is either null or a reference to an outer Environment Record.
A conceptual view using pseudo-code:
```javascript
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\]][5]

<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/06g8v67qzlgcds5i22fk.png" align="left" alt="Environment Record in Global Scope"> 


Let's also understand the `Structure of execution context`
 
<h2> Execution Context: </h2>
  - 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:
```javascript
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\]][6] | - The `LexicalEnvironment component` and `VariableEnvironment` components of an execution context are always **Environment Records** [\[refer ES2021\]][7] |
 
<h2> Summary </h2>
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**.

<h2>Wrap Up!!</h2>
Thank you for your time!! Let's connect to learn and grow together.
[Github](https://github.com/deltanode) [Twitter](https://twitter.com/yogesh_yadv)

  [1]: https://262.ecma-international.org/6.0/
  [2]: https://262.ecma-international.org/11.0/
  [3]: https://262.ecma-international.org/11.0/#sec-ecmascript-function-objects
  [4]: https://262.ecma-international.org/12.0/
  [5]: https://262.ecma-international.org/12.0/#sec-ecmascript-function-objects
  [6]: https://262.ecma-international.org/11.0/#table-23
  [7]: https://262.ecma-international.org/12.0/#table-23