Execution Context — Flow Diagram — JavaScript

Execution Context — Memory + Code, in two phases

flowchart TD
    S["<b>i · Program starts</b><br/>Global Execution Context<br/>pushed onto the Call Stack"]
      --> M["<b>ii · Phase 1 — Memory Creation</b><br/>Scan entire code, allocate memory"]
    M --> MV["<b>iii · Variables</b><br/>stored as <code>undefined</code>"]
    M --> MF["<b>iv · Function declarations</b><br/>stored with entire code"]
    MV --> E["<b>v · Phase 2 — Code Execution</b><br/>run line by line"]
    MF --> E
    E --> A["<b>vi · Assignments</b><br/><code>undefined</code> → real value"]
    E --> I["<b>vii · Invocations</b><br/>new Execution Context pushed"]
    A --> D["<b>viii · Program ends</b><br/>GEC destroyed, stack empty"]
    I --> D
 
    classDef phase1 fill:#f5efe1,stroke:#6a8a4f,stroke-width:2px,color:#1a1915;
    classDef phase2 fill:#e7efd9,stroke:#587640,stroke-width:2px,color:#1a1915;
    classDef boundary fill:#fdecd3,stroke:#c2410c,stroke-width:2px,color:#1a1915;
    class S,D boundary
    class M,MV,MF phase1
    class E,A,I phase2

Program starts

The Global Execution Context (GEC) is created and pushed onto the Call Stack.
Phase 1 — Memory

JS scans every line without executing and allocates memory for declarations.
Variables

Every `var` is stored with the placeholder value `undefined`.
Functions

Function declarations are stored with their entire body — not undefined.
Phase 2 — Code

Execution runs line by line, in order, on a single thread.
Assignments

The placeholder `undefined` is replaced with the actual value written in code.
Invocations

Calling a function creates a fresh Execution Context on top of the stack.
Program ends

GEC is destroyed and popped — the Call Stack is empty; execution is done.

Execution Context — Memory + Code, in two phases

Comments