In JavaScript, the **execution context** is the environment within which code is executed. It determines what variables and functions are accessible at any given point during code execution. There are two primary types of execution contexts: 1. **Global Execution Context (GEC)**: This is the default context where all JavaScript code that isn't inside a function executes. It sets up the global object (`window` in browsers) and binds the `this` keyword to this global object. 2. **Function Execution Context (FEC)**: Each time a function is invoked, a new execution context is created for that function. This context handles the function's local variables, parameters, and the specific value of `this` within that function. ## Phases of Execution Context Creation The creation of an execution context occurs in two main phases: ### 1. Creation Phase During this phase, the JavaScript engine sets up the environment for the code to be executed. It involves: - **Variable Object (VO) Creation**: The engine allocates memory for variables and functions. Variables declared with `var` are initialized to `undefined`, while function declarations are stored in memory, making them accessible before the code execution begins. This behavior is known as hoisting. - **Scope Chain Establishment**: The scope chain is created to manage variable access. It ensures that functions have access to variables from their own scope and any outer scopes, enabling lexical scoping. - **`this` Binding**: The value of the `this` keyword is determined during this phase. In the global context, `this` refers to the global object. Within functions, the value of `this` depends on how the function is called. ### 2. Execution Phase In this phase, the JavaScript engine executes the code line by line: - **Variable Assignment**: Variables are assigned their actual values based on the code logic. - **Function Execution**: Functions are invoked, and if a function is called, a new Function Execution Context is created and pushed onto the call stack. - **Call Stack Management**: The call stack keeps track of the execution contexts in a Last-In-First-Out (LIFO) order. When a function is invoked, its execution context is added to the top of the stack. Once the function completes, its context is popped off, and control returns to the previous context. Understanding these phases is crucial for grasping concepts like hoisting, scope, and the behavior of the `this` keyword in JavaScript. For a visual explanation, you might find this video helpful: [JavaScript Visualized - Execution Contexts](https://www.youtube.com/watch?v=zdGfo6I1yrA)