How JS is Executed & Call Stack — Flow Diagram — JavaScript

Call Stack — push, push, pop, push, pop

flowchart LR
    S1["<b>i · Step 1</b><br/>Program starts<br/>[ GEC ]"]
      --> S2["<b>ii · Step 2</b><br/>square(n) called<br/>[ GEC, square(n) ]"]
    S2 --> S3["<b>iii · Step 3</b><br/>square(n) returns<br/>[ GEC ]"]
    S3 --> S4["<b>iv · Step 4</b><br/>square(4) called<br/>[ GEC, square(4) ]"]
    S4 --> S5["<b>v · Step 5</b><br/>square(4) returns<br/>[ GEC ]"]
    S5 --> S6["<b>vi · Program ends</b><br/>GEC popped — stack empty"]
 
    classDef gec fill:#f5efe1,stroke:#6a8a4f,stroke-width:2px,color:#1a1915;
    classDef call fill:#fdecd3,stroke:#c2410c,stroke-width:2px,color:#1a1915;
    classDef done fill:#e7efd9,stroke:#587640,stroke-width:2px,color:#1a1915;
    class S1,S3,S5 gec
    class S2,S4 call
    class S6 done

Program starts

Global Execution Context pushed — the only frame on the Call Stack.
square(n)

Invocation pushes a new Execution Context on top of GEC.
First return

`return ans` pops square(n). Only GEC remains.
square(4)

Second invocation pushes a fresh Execution Context — no shared state with the first.
Second return

`return ans` pops square(4). Back to GEC only.
Program ends

GEC is destroyed and popped. The Call Stack is empty — program is done.

Call Stack — push, push, pop, push, pop

Comments