What is the JavaScript Execution Context? Call Stack & Memory Phase Explained
An Execution Context is an internal environment created by the JavaScript engine (such as Google V8) whenever code is evaluated. It houses the variables, functions, scope chain, and the value of 'this' accessible to that executing code.
Why It Matters in Production
Deeply understanding execution contexts demystifies hoisting, closures, variable shadowing, temporal dead zones (TDZ), and call stack overflows, enabling engineers to write bug-free, memory-efficient JavaScript.
How It Works Under the Hood
Execution contexts are created in two distinct phases: 1) Creation (Memory) Phase: Variables declared with var are allocated memory and initialized to undefined; functions are copied in full; let/const are allocated in the TDZ. 2) Execution Phase: Code runs line by line, assigning real values and executing operations on the Call Stack.
Code Architecture Example
// Demonstrating Hoisting & Execution Context console.log(greeting); // undefined (var hoisted and initialized to undefined) var greeting = "Hello World"; // console.log(farewell); // ReferenceError: Cannot access before initialization let farewell = "Goodbye World";
Common Architectural Pitfalls
- Assuming 'let' and 'const' are not hoisted; they are hoisted into the Temporal Dead Zone (TDZ) and throw ReferenceError if accessed before declaration.
- Unintended memory leaks caused by lingering closures retaining large object references in memory heaps.
JavaScript Part 2 : Scope & Execution
Explore the complete, step-by-step tutorial published on Aditya's engineering blog.