1. Introduction
In JavaScript, code is executed and is related to two main types of executions contexts. In this tutorial, we’ll discuss these two execution contexts:
- Global execution contexts
- Function execution contexts
There is third type of execution context that is created for the code inside the eval
function. Since the use of eval
function is discouraged due to security concerns, we’ll not discuss this third execution context.
2. Global Execution Context
The global execution context is the base context created whenever JavaScript code is loaded for execution. Any code which is not inside a function, is executed inside a global execution context.
The global execution context contains the following:
- the global variables
- functions
- value for
this
- reference to the outer environment. In case of the global context, is
null
.
3. Function Execution Context
Every time a JavaScript function is called, a new execution context is created for the execution of that function. The function execution context, contains the following:
- The variables and functions are declared inside the function.
- The value of
this
inside the function for the current function call. - A reference to the outer environment.
- the arguments passed to the function
4. Execution Context Phases
Execution contexts have following two phases:
- Creation phase
- Execution phase
4.1 Creation Phase
The global execution context and function execution context are created during the creation phase. During this phase, the variable declarations and references to functions are saved as key-value pairs inside the execution context.
During this phase, the value of this
and a reference to the outer environment are also established. Variables declared using var
are assigned undefined
as their value during this phase, while variables declared using let
or constants declared using const are left uninitialized.
In a global context, there is no outer environment, so the reference to it is set to null
. However, in a function context, the value of this
depends on how the function is called, and is therefore set accordingly.
4.2 Lexical and Variable Environment
During the creation phase, the following two components are created:
- Lexical environment
- Variable environment
Lexical and Variable environments are internal structures used to store key-value mappings of variables and functions, the reference to the outer environment, and the value of this
.
The difference between lexical and variable environments is that the variable environment only holds key-value mappings of variables declared with the var
keyword, whereas function declarations and variables declared with let
or constants declared using const
are stored in the lexical environment.
Consider the following code:
let name = "Jane Doe"; var age = 20; function message(name, age) { console.log("Name: " + name + " ,Age: " + age); }
The execution context for this code can be visualized as:
![](https://learnitweb.com/wp-content/uploads/2024/07/javascript-global-execution-context-example.jpg)
4.3 Execution Phase
In the execution phase, variables are assigned their respective values and the code is executed.
A call stack is an internal structure used by the JavaScript engine to keep track of the currently executing piece of code. You can also think of a call stack in JavaScript as a collection of execution contexts. Before executing any JavaScript code, a global execution context is created and pushed on the call stack. For every function call, a new entry is added to the call stack before that function starts executing, and as soon as the function execution ends, that entry is popped off the stack.
5. Conclusion
Understanding the execution context in JavaScript is crucial for mastering the language. It dictates how functions are invoked, how variables and objects are managed, and how the code is executed.