How JS Runs Code: Execution Context & The Call Stack

Variables: const, let & var (The Box Metaphor)

Learn how variables act as labeled containers for data using const, let, and var to manage lexical scope and reassignment safely in modern applications.

1. Inside the Execution Container

In JavaScript, everything happens inside an Execution Context. Think of an Execution Context as a sealed container where JavaScript evaluates and executes your code.

2. Why It Matters

Understanding the 2 execution phases explains hoisting, scope boundaries, closures, call stack overflows, and how the V8 engine manages memory.

3. The 2 Execution Phases

Whenever a JavaScript program runs or a function is invoked, the engine creates an Execution Context in two distinct phases:

1. Phase 1: Memory Creation Phase: The engine scans the code line-by-line before executing anything. It allocates memory space for variables (var set to undefined) and stores full function declarations.
2. Phase 2: Code Execution Phase: The engine runs the code sequentially, assigning actual values to variables and executing function calls.

4. The Call Stack

The JS engine manages execution contexts using a LIFO (Last-In, First-Out) Call Stack. The Global Execution Context (GEC) sits at the bottom of the stack. When a function is called, a new local Execution Context is pushed onto the stack. When the function returns, its context is popped off!

[ Call Stack ]
┌─────────────────────────┐
│  calculateTax() Context │ <- Currently executing (Top of stack)
├─────────────────────────┤
│  processOrder() Context │
├─────────────────────────┤
│  Global Context (GEC)   │ <- Bottom of stack
└─────────────────────────┘

5. Code Execution Step-by-Step

var x = 2;
function square(num) {
  var ans = num * num;
  return ans;
}
var square2 = square(x);

1. Phase 1 (Memory): x: undefined, square: [function code], square2: undefined.
2. Phase 2 (Execution): x = 2. Calling square(2) creates a new local context.
3. Inside square local context: num = 2, ans = 4. return 4 pops local context off stack and assigns 4 to square2.

6. Common Mistakes

• Stack Overflow: Recursive functions without a proper base condition push endless execution contexts onto the stack until it throws RangeError: Maximum call stack size exceeded.

7. Next Steps

Remember: Memory allocation happens BEFORE code execution. This leads directly to our next topic: Hoisting!