Docs
Module-12-Execution-Context
Module 12: JavaScript Execution Context & Runtime
📖 Overview
Understanding how JavaScript executes code is crucial for mastering the language. This module explores the JavaScript engine's internals—how code is parsed, executed, and managed at runtime. You'll learn about execution contexts, the call stack, memory management, and the event loop.
┌─────────────────────────────────────────────────────────────────────────────────┐
│ JAVASCRIPT RUNTIME ARCHITECTURE │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────────────────────────────────┐ │
│ │ JAVASCRIPT ENGINE (V8, SpiderMonkey) │ │
│ │ ┌──────────────────────┐ ┌──────────────────────────────────────┐ │ │
│ │ │ CALL STACK │ │ HEAP MEMORY │ │ │
│ │ │ ┌────────────────┐ │ │ ┌──────┐ ┌──────┐ ┌──────┐ │ │ │
│ │ │ │ function C() │ │ │ │ Obj1 │ │ Obj2 │ │ Arr1 │ │ │ │
│ │ │ ├────────────────┤ │ │ └──────┘ └──────┘ └──────┘ │ │ │
│ │ │ │ function B() │ │ │ Objects, Arrays, Functions │ │ │
│ │ │ ├────────────────┤ │ │ stored here │ │ │
│ │ │ │ function A() │ │ │ │ │ │
│ │ │ ├────────────────┤ │ └──────────────────────────────────────┘ │ │
│ │ │ │ Global EC │ │ │ │
│ │ │ └────────────────┘ │ │ │
│ │ └──────────────────────┘ │ │
│ └─────────────────────────────────────────────────────────────────────────┘ │
│ │ │
│ ▼ │
│ ┌─────────────────────────────────────────────────────────────────────────┐ │
│ │ WEB APIs (Browser) │ │
│ │ setTimeout │ fetch │ DOM Events │ Geolocation │ IndexedDB │ │
│ └───────────────────────────────┬─────────────────────────────────────────┘ │
│ │ │
│ ▼ │
│ ┌─────────────────────────────────────────────────────────────────────────┐ │
│ │ CALLBACK QUEUE │ MICROTASK QUEUE │ │
│ │ ┌────┐ ┌────┐ ┌────┐ │ ┌────┐ ┌────┐ ┌────┐ │ │
│ │ │ T1 │ │ T2 │ │ T3 │ │ │ P1 │ │ P2 │ │ P3 │ │ │
│ │ └────┘ └────┘ └────┘ │ └────┘ └────┘ └────┘ │ │
│ │ setTimeout, Events │ Promises, queueMicrotask │ │
│ └────────────────────────┬────┴──────────────────┬────────────────────────┘ │
│ │ │ │
│ └───────────┬───────────┘ │
│ │ │
│ ▼ │
│ ┌────────────────────────┐ │
│ │ EVENT LOOP │ │
│ │ (Monitors & Moves │ │
│ │ tasks to stack) │ │
│ └────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
🎯 Why This Module Matters
Understanding execution context and the runtime is essential for:
| Concept | Why It Matters |
|---|---|
| Execution Context | Understand this, scope, closures at a deeper level |
| Call Stack | Debug stack traces, understand recursion limits |
| Hoisting | Avoid subtle bugs with variable/function declarations |
| Event Loop | Write efficient async code, avoid blocking |
| Memory Management | Prevent memory leaks, optimize performance |
📚 Module Contents
┌─────────────────────────────────────────────────────────────────────────────┐
│ MODULE 12: EXECUTION CONTEXT & RUNTIME │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ 12.1 EXECUTION CONTEXT │ │
│ │ ───────────────────────── │ │
│ │ • Global execution context (created first) │ │
│ │ • Function execution context (per function call) │ │
│ │ • Creation phase vs execution phase │ │
│ │ • Lexical environment & variable environment │ │
│ │ • The `this` binding │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │ │
│ ▼ │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ 12.2 THE CALL STACK │ │
│ │ ──────────────────── │ │
│ │ • Stack data structure (LIFO) │ │
│ │ • Push on function call, pop on return │ │
│ │ • Stack overflow (too much recursion) │ │
│ │ • Reading stack traces for debugging │ │
│ │ • Maximum call stack size (~10,000-15,000 in V8) │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │ │
│ ▼ │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ 12.3 HOISTING DEEP DIVE │ │
│ │ ──────────────────────── │ │
│ │ • var is hoisted (initialized to undefined) │ │
│ │ • let/const are hoisted but NOT initialized (TDZ) │ │
│ │ • Function declarations hoisted completely │ │
│ │ • Function expressions NOT hoisted │ │
│ │ • Class declarations NOT hoisted │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │ │
│ ▼ │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ 12.4 THE EVENT LOOP │ │
│ │ ──────────────────── │ │
│ │ • Single-threaded but non-blocking │ │
│ │ • Call stack → Web APIs → Queues → Back to stack │ │
│ │ • Microtask queue (Promises) runs before Macrotask queue │ │
│ │ • setTimeout(fn, 0) isn't really 0ms │ │
│ │ • requestAnimationFrame for smooth animations │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │ │
│ ▼ │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ 12.5 MEMORY MANAGEMENT │ │
│ │ ──────────────────────── │ │
│ │ • Stack memory (primitives, references) │ │
│ │ • Heap memory (objects, arrays, functions) │ │
│ │ • Garbage collection (mark and sweep) │ │
│ │ • Common memory leak patterns │ │
│ │ • WeakMap/WeakSet for automatic cleanup │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
🔍 Key Concepts Preview
Execution Context Phases
┌─────────────────────────────────────────────────────────────────────────────┐
│ EXECUTION CONTEXT LIFECYCLE │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ function example(a, b) { │
│ var x = 10; │
│ function inner() { return a + b; } │
│ return x + inner(); │
│ } │
│ example(1, 2); │
│ │
│ CREATION PHASE EXECUTION PHASE │
│ ─────────────── ──────────────── │
│ │
│ ┌─────────────────────────┐ ┌─────────────────────────┐ │
│ │ Variable Environment: │ │ Variable Environment: │ │
│ │ x: undefined │ ──▶ │ x: 10 │ │
│ │ │ │ │ │
│ │ Lexical Environment: │ │ Lexical Environment: │ │
│ │ inner: <function> │ │ inner: <function> │ │
│ │ arguments: [1, 2] │ │ arguments: [1, 2] │ │
│ │ a: 1, b: 2 │ │ a: 1, b: 2 │ │
│ │ │ │ │ │
│ │ this: window/undefined │ │ this: window/undefined │ │
│ │ │ │ │ │
│ │ Outer: Global EC │ │ Outer: Global EC │ │
│ └─────────────────────────┘ └─────────────────────────┘ │
│ │
│ • Variables declared with `var` → set to undefined │
│ • Functions → fully hoisted │
│ • `this` → determined by how function is called │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
Event Loop Visualization
┌─────────────────────────────────────────────────────────────────────────────┐
│ EVENT LOOP IN ACTION │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ console.log('1'); │
│ setTimeout(() => console.log('2'), 0); │
│ Promise.resolve().then(() => console.log('3')); │
│ console.log('4'); │
│ │
│ OUTPUT: 1, 4, 3, 2 │
│ │
│ WHY? │
│ ────────────────────────────────────────────────────────────────────── │
│ ┌───────────────┐ ┌───────────────┐ ┌───────────────┐ │
│ │ CALL STACK │ │ MICROTASKS │ │ MACROTASKS │ │
│ │ │ │ (Priority) │ │ (After) │ │
│ ├───────────────┤ ├───────────────┤ ├───────────────┤ │
│ │ 1. log('1') ✓ │ │ Promise.then │ │ setTimeout │ │
│ │ 2. setTimeout │──▶ │ → log('3') │ │ → log('2') │ │
│ │ 3. Promise │──▶ │ │ │ │ │
│ │ 4. log('4') ✓ │ │ Runs FIRST ▲ │ │ Runs LAST ▲ │ │
│ └───────────────┘ └───────────────┘ └───────────────┘ │
│ │
│ PRIORITY ORDER: │
│ 1. Synchronous code (call stack) │
│ 2. Microtasks (Promises, queueMicrotask) │
│ 3. Macrotasks (setTimeout, setInterval, I/O) │
│ 4. Render (if in browser) │
│ 5. Repeat │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
Hoisting Reference
┌─────────────────────────────────────────────────────────────────────────────┐
│ HOISTING BEHAVIOR │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌────────────────────────────┬─────────────┬─────────────────────────┐ │
│ │ Declaration │ Hoisted? │ Initial Value │ │
│ ├────────────────────────────┼─────────────┼─────────────────────────┤ │
│ │ var x = 5; │ ✅ │ undefined │ │
│ │ let y = 5; │ ✅* │ TDZ (error) │ │
│ │ const z = 5; │ ✅* │ TDZ (error) │ │
│ │ function foo() {} │ ✅ │ <function> │ │
│ │ const foo = () => {} │ ✅* │ TDZ (error) │ │
│ │ class Foo {} │ ✅* │ TDZ (error) │ │
│ └────────────────────────────┴─────────────┴─────────────────────────┘ │
│ │
│ * Hoisted but in Temporal Dead Zone until declaration line │
│ │
│ TDZ = Temporal Dead Zone (ReferenceError if accessed before init) │
│ │
│ EXAMPLE: │
│ ┌────────────────────────────────────────────────────────────────────┐ │
│ │ console.log(a); // undefined (var hoisted, init to undefined) │ │
│ │ console.log(b); // ReferenceError (let is in TDZ) │ │
│ │ var a = 1; │ │
│ │ let b = 2; │ │
│ └────────────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
📋 Prerequisites
Before starting this module, you should understand:
- •✅ Functions (Module 5) - especially closures and scope
- •✅ Basic understanding of async callbacks
- •✅ How
thisworks in different contexts (Module 10)
🎓 Learning Path
┌─────────────────────────────────────────────────────────────────────────────┐
│ RECOMMENDED ORDER │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ 1. 12.1 Execution Context │
│ └──▶ Foundation for understanding how JS runs code │
│ │
│ 2. 12.2 The Call Stack │
│ └──▶ See how function calls are tracked │
│ │
│ 3. 12.3 Hoisting Deep Dive │
│ └──▶ Understand creation phase behavior │
│ │
│ 4. 12.4 The Event Loop │
│ └──▶ Critical for async programming │
│ │
│ 5. 12.5 Memory Management │
│ └──▶ Optimization and avoiding leaks │
│ │
│ ESTIMATED TIME: 4-6 hours │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
✅ Key Takeaways
After completing this module, you'll understand:
| Concept | You'll Be Able To |
|---|---|
| Execution Context | Explain how JS creates and manages contexts |
| Call Stack | Read and debug stack traces effectively |
| Hoisting | Predict how declarations behave |
| Event Loop | Write non-blocking async code |
| Memory | Identify and fix memory leaks |
📚 Related Modules
- •Module 5: Functions - Scope and closures foundation
- •Module 15: Async JavaScript - Practical async programming
- •Module 24: Engine Internals - V8 optimization deep dive