JavaScript Execution Context & Hoisting: Engine Phases & The Call Stack

Everything in JavaScript happens inside an Execution Context. If you aspire to master JavaScript at a senior engineering level or score top marks in university computer science exams, understanding how the V8 engine creates execution contexts and manages the Call Stack is mandatory.

Figure 11: The Two Phases of Execution Context: Memory Creation Phase vs Code Execution Phase, and LIFO Call Stack mechanics.

The Two Types of Execution Context

• Global Execution Context (GEC): Created automatically as soon as JavaScript starts running. There is only ever ONE Global Execution Context, and it remains at the very bottom of the Call Stack until the browser tab closes.
• Function Execution Context (FEC): Created afresh each and every time a function is invoked. Pushed onto the Call Stack on call; popped off when the function returns.

The Two Phases of Every Execution Context

Phase 1: Memory Creation Phase (Hoisting)

Before running a single line of executable code, the engine scans the script and allocates memory space for all declarations:

• Variables declared with var are allocated and assigned undefined.
• Variables declared with let and const are allocated in the Temporal Dead Zone (TDZ) without initialization.
• Function Declarations are stored completely in memory with their full body intact.
• The this keyword is bound.

Phase 2: Code Execution Phase

JavaScript executes the program line-by-line, assigning real values to variables (e.g. score = 95) and invoking functions.

Detailed Code Walkthrough & Call Stack Trace

var x = 10;

function calculateDouble(num) {
    var result = num * 2;
    return result;
}

var y = calculateDouble(x);
console.log(y); // 20