Execution Context

An execution context is the environment in which JavaScript code is evaluated and executed. It contains all the information the engine needs to run the code: the variable scope chain, the this value, and references to the outer environment.

Think of it as a blueprint or container that holds everything needed for a specific piece of code to run.

// Global Execution Context is created when the script starts
var name = 'Alice'; // Variable declaration in global context

function greet() {
  // Function Execution Context is created when greet() is called
  console.log(`Hello, ${name}`);
}

greet(); // Creates a new execution context for greet

Every time a function is called, a new execution context is created for that function invocation. This is how JavaScript tracks which variables and scopes are active at any given moment.

There are three types of execution contexts in JavaScript:

1. Global Execution Context

Created when a JavaScript file is first loaded. There is only one global execution context. It:

• Creates the global object (window in browsers, global in Node.js)
• Sets this to reference the global object
• Sets up the outer environment (null for global)

2. Function Execution Context

Created every time a function is invoked. Each function call gets its own execution context with its own variables, parameters, and scope chain.

function outer() {
  var x = 10;
  
  function inner() {
    var y = 20;
    console.log(x + y); // inner has its own execution context
  }
  
  inner(); // inner's execution context references outer's via scope chain
}

outer(); // outer's execution context references global

3. Eval Execution Context

Created when code is executed inside an eval() function. This is rarely used and generally discouraged.

eval('var z = 30;'); // Creates an eval execution context

Each execution context goes through two distinct phases:

Creation Phase

Before any code is executed, the engine processes declarations:

• Variable declarations are hoisted and initialized to undefined
• Function declarations are hoisted and stored in memory
• The this binding is determined
• The scope chain is established

console.log(x); // undefined (hoisted, not yet assigned)
var x = 5;

console.log(add(2, 3)); // Works! Function is hoisted
function add(a, b) {
  return a + b;
}

Execution Phase

The engine executes the code line by line:

• Variables are assigned their actual values
• Functions are called (creating new execution contexts)
• The this value may change based on how functions are called

var x = 10; // Execution phase: x is assigned 10

function multiply(a, b) {
  return a * b;
}

var result = multiply(x, 5); // Execution phase: function called, new context created

Visual Example

// Creation Phase
var a = undefined;    // hoisted
function foo() {}     // hoisted and stored

// Execution Phase  
a = 10;               // assigned
foo();                // called, new context created