Now we’ll start diving into the steps that happen when execution context is created, specifically we’ll learn about lexical environment.

The more we learn about this, the closer we are to understanding other subjects in JS such as hoisting, and closure very easily.

So let’s begin!

Overview

Do you remember what I talked about in the previous article regarding what happens when execution context is created? Let’s go over it again briefly.

The creation is execution context happens in 2 phases:

1. Creation Phase - in the creation phase a template is created of all the variables the functions that are in the code. Variable declerations are saved with an initial value of undefined in the case of var or uninitilized in the case of let and const. Function declarations are saved as well, and the function arguments values are also saved.

2. Execution Phase - the engine goes through the code, assigns the different variables and executes the code.

Creation Phase in Depth

This was a high-level overview, in reality, things are a bit more complex. The creation phase consists of three things:

1. VariableEnvironment - the VariableEnvironment is a type of lexical environment and its used to save the variables, functions and arguments.

2. LexicalEnvironment - the LexicalEnvironment is a copy of the Variableenvironment.

3. thisBinding - this is where the value of this is set, we will talk about it in the next article.

ExecutionContext = {  

  ThisBinding: <this value>,  
  VariableEnvironment: { ... },  
  LexicalEnvironment: { ... }  
}  

In this article, we’ll talk about the first 2 parts of the creation phase, VariableEnvironment, and LexicalEnvironment creation.

Both of them are types of lexical environments, and the LexicalEnvironment is essentially a copy of the VariableEnvironment so for now we’ll treat them as the same and we’ll talk about their differences later.

Lexical Environment

So… what’s a lexical environment?

The official definition says as follows:

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 ECMAScript code. A Lexical Environment consists of an Environment Record and a possibly null reference to an outer Lexical Environment.

Let’s simplify it and focus on the important part of the definition:

A Lexical Environment is a specification type used to define the association of Identifiers to specific variables and functions

A lexical environment is essentially a structure that defines the association between identifiers, to specific variables and functions.

If you’re wondering what the difference is between identifiers and variables, you can think of identifiers as the variables’ names.

The association between a name of a variable to its value is called binding. So if you hear the term identifier binding, remember it’s about the association between the variable name to its value.

So if we take the next piece of code:

let x = 10;  

The identifier is x, and it has binding to the value 10.

var x = 10;  
function foo(a) {  
var y = 20;  
}  
foo('hello');  

// environment of the global context  
globalEnvironment = {  
environmentRecord: {  
// type  
type: "ObjectEnvironmentRecord",  
// built-ins:  
Object: function,  
Array: function,  
// etc ...  
  
// our bindings:  
x: 10  
foo: <function ref>  
},  
outer: null // no parent environment  
};  
  
// environment of the "foo" function  
fooEnvironment = {  
environmentRecord: {  
// type  
type: "DeclarativeEnvironmentRecord",  
// our bindings:  
y: 20,  
arguments: {0: 'hello', length: 1},  
},  
outer: globalEnvironment  
};  

Summary

A new lexical environment is created when an execution context is created. There are two types of lexical environments:

1. VariableEnvironment

2. LexicalEnvironment

These environments are identical and the difference is minor and only relevant when an inner temporary scope is created. In practice, we can treat them both as the lexical environment as most of the time they’re identical (except with catch or with).

A lexical environment is a structure which defines the association between identifiers of variables and functions, a kind of map between variable and function names and their values.

A lexical environment contains two things:

1. Environment Record - the environment record holds the variables and functions inside the lexical environment. The declarative environment record holds declarations of variables, functions and arguments that are inside function scopes. The object environment record holds the decelerations of variable and functions that are inside the global scope.

2. Reference to outer environment - every lexical environment also holds a reference to its outer lexical environment. So if a value is not found in the current environment record, the engine will search it in the environment above, until it’s found or reached the very top level

That’s it for today, now you understand exactly what happens when a new execution context is created.

Resources:

• JavaScript basics: The Execution Context and the Lexical Environment

• Dmitry Soshnikov’s post on the Theory of Lexical Environments

• ECMAScript 5 spec: LexicalEnvironment versus VariableEnvironment