What is Execution Context In JavaScript?

JavaScript Execution Context - Internal Working of JS

A JavaScript Execution Context is an abstract environment created by the JavaScript engine to evaluate and execute JS code. It contains all the necessary information and scope required for code execution.

Remember this fundamental rule:

"Everything in JavaScript happens inside an Execution Context"

Execution context in JavaScript has two distinct components: the Memory Component and the Code Component.

Let's break down both components to understand how JavaScript runs under the hood.

flowchart TB
    subgraph Memory["🧠 Memory Component (Variable Environment)"]
        direction LR
        M1["key : value"]
        M2["a : 15"]
        M3["name : 'John'"]
        M4["isAlive : true"]
        M5["function { ... }"]
    end

    subgraph Code["💻 Code Component (Thread of Execution)"]
        direction LR
        C1["</> actual code"]
        C2["⚡ Line-by-line execution"]
        C3["🔄 Execution Stack"]
    end

    Memory --> Code

    style Memory fill:#18181b,stroke:#ef4444,stroke-width:2px,color:#ffffff
    style Code fill:#18181b,stroke:#3b82f6,stroke-width:2px,color:#ffffff

    style M1 fill:#27272a,stroke:#3f3f46,color:#f4f4f5
    style M2 fill:#27272a,stroke:#3f3f46,color:#f4f4f5
    style M3 fill:#27272a,stroke:#3f3f46,color:#f4f4f5
    style M4 fill:#27272a,stroke:#3f3f46,color:#f4f4f5
    style M5 fill:#27272a,stroke:#3f3f46,color:#f4f4f5

    style C1 fill:#27272a,stroke:#3f3f46,color:#f4f4f5
    style C2 fill:#27272a,stroke:#3f3f46,color:#f4f4f5
    style C3 fill:#27272a,stroke:#3f3f46,color:#f4f4f5

Memory Component (Variable Environment) This is the section where all variables and functions declared in the program are stored as key-value pairs (key: value). This memory section is formally known as the Variable Environment.

Code Component (Thread of Execution) This is the section where code is executed line-by-line (one line at a time). This is known as the Thread of Execution.

---

Phases of the JavaScript Execution Context

When JavaScript code is executed, it runs through two distinct phases:

1. Creation / Scanning Phase: The JS engine creates the Execution Context container and allocates memory for variables and functions. Variables are initialized with undefined, while function declarations are stored directly in memory.

2. Execution Phase: The JS engine executes the code line-by-line. The undefined variable values are replaced with their actual assigned values from the code.

Let's trace this with a simple program:

let a = 10;

function addOne(num) {
  return num + 1;
}

In the scanning phase:

flowchart LR
    subgraph Memory["Memory Component"]
        direction TB
        M1["a: undefined"]
        M2["function addOne(num) {
  return num + 1;
}"]
    end

    subgraph Code["Code Component"]
        direction TB
        C1["let a = 10;"]
        C2["function addOne(num) {
  return num + 1;
}"]
    end

    style Memory fill:#2b2b2b,stroke:#ff3b3b,stroke-width:2px,color:#fff
    style Code fill:#2b2b2b,stroke:#ff3b3b,stroke-width:2px,color:#fff
    style M2 fill:#1a1a1a,stroke:#888,color:#fff
    style C1 fill:#1a1a1a,stroke:#888,color:#fff
    style C2 fill:#1a1a1a,stroke:#888,color:#fff

In the execution phase: The initial undefined value for variable a is replaced with the assigned value 10.

---

Real-World Analogy: The Restaurant Kitchen

Imagine You're at a Restaurant

Think of the JavaScript engine as a busy restaurant kitchen where different chefs (functions) prepare meals (executing code).

The Execution Context is like the dedicated kitchen workspace that each chef uses to prepare their meal.

When the restaurant opens, the head chef sets up the Global Execution Context. This is the primary kitchen setup:

• Ingredients (variables & functions) available to all chefs.
• Utensils (methods & objects) everyone can access.
• Recipes (global functions) any chef can follow.

function makeSalad(ingredient) {
  var dressing = "Olive Oil";
  console.log("Using ingredient: " + ingredient + " with " + dressing);
}
makeSalad("Lettuce");

When makeSalad("Lettuce") is invoked, a new Function Execution Context is created:

• Creation Phase:
  • Workspace is allocated.
  • Local ingredients (ingredient, dressing) are declared.
  • ingredient receives "Lettuce".
  • dressing is declared as undefined.
• Execution Phase:
  • dressing is assigned "Olive Oil".
  • The function body executes sequentially.

---

Key Summary

• Execution Context (EC) is created by the JS engine whenever code runs.
• Two Phases: Creation phase (memory allocation) and Execution phase (line-by-line execution).
• Global EC vs Function EC: Global context is created once; function execution contexts are created and pushed onto the Call Stack as functions are called.