07. Execution Context Lifecycle: Creation Phase vs Execution Phase • JavaScript & Advanced ES6+ (0-to-Hero Big Tech Standard) • Rishabh Ki Kaksha

JavaScript & Advanced ES6+ (0-to-Hero Big Tech Standard) › 07. Execution Context Lifecycle: Creation Phase vs Execution Phase

45 mins

← Prev Next →

Course Syllabus

Module 1: Foundations & Evolution (Zero Level to Syntax Mastery)

01. What is JavaScript? History, TC39 & Client vs Server Execution 02. How Browsers Execute JS & The Critical Rendering Path 03. Datatypes Deep Dive: Primitives vs Reference Objects & Memory Layout 04. Variables, Scope & The Temporal Dead Zone (var vs let vs const) 05. Type Coercion, Equality Quirks (== vs ===, NaN & Object.is)

Module 2: V8 Engine Internals & Execution Context Architecture

06. Google V8 Engine Architecture: Ignition, Sparkplug & TurboFan 07. Execution Context Lifecycle: Creation Phase vs Execution Phase 08. Garbage Collection Mechanics & Memory Leak Profiling

Module 3: Functions, Closures & Functional Programming Patterns

09. First-Class Functions, Arrow Functions & Lexical this Binding 10. Closures Deep Dive: Encapsulation, Factory Functions & Memory Overhead 11. Currying, Partial Application & Function Composition (Pipe/Compose) 12. Method Borrowing: call(), apply(), bind() & Custom Polyfills

Module 4: Asynchronous Architecture, Event Loop & Promises

13. Event Loop Masterclass: Call Stack, Web APIs, Microtasks & Macrotasks 14. Promises Architecture: States, Chaining & Custom MyPromise Polyfill 15. Promise Combinators: all, allSettled, race, any & Concurrency Control 16. async/await Internals, Generators (function*) & Coroutine Emulation

Module 5: Objects, Prototypes, Classes & Metaprogramming

17. Prototypal Inheritance, Prototype Chain & __proto__ vs prototype 18. ES6 Classes, Static Blocks, Private Fields and Subclassing 19. Metaprogramming with Proxy & Reflect API (Reactive State Engine)

Module 6: Browser DOM, Event Architecture & High-Scale Polyfills

20. DOM Event Propagation: Capturing, Target, Bubbling & Delegation 21. Debouncing vs Throttling: Production Polyfills with Leading & Trailing Flags 22. Big Tech Machine Coding: Custom EventEmitter & PubSub System 23. Big Tech Machine Coding: Deep Clone with Circular References & LRU Cache

Interactive Lesson Studio

# 07. Execution Context Lifecycle: Creation Phase vs Execution Phase

> JavaScript Notes by Rishabh - Topic 07

---

### 1. Execution Context Kya Hai? (Asaan Bhasha Me)

**Execution Context (EC) JavaScript ka wo "Kamera / Studio Room" hai** jiske andar tera JS code execute hota hai.

Har JS program me ek master room hota hai jise **Global Execution Context (GEC)** kehte hain, aur har baar jab koi function call hota hai, uske liye ek naya private room banta hai jise **Function Execution Context (FEC)** kehte hain.

**Tagline yaad rakh:**
> Execution Context = Ek Band Kamra jisme 2 boxes hain:  
> 1. Memory Component (Variable Environment) - Jahan saman rakha hai  
> 2. Code Component (Thread of Execution) - Jahan ek-ek line execute hoti hai

---

### 2. Execution Context Ki 2 Phases - The Life Cycle

Jab bhi koi Execution Context banta hai, JS engine use **2 Phases** me execute karta hai:

#### Phase 1: Creation Phase (Memory Allocation Phase)
Is phase me code execute nahi hota! Engine sirf pure code ko scan karta hai aur memory allocate karta hai:
1. **`var` variables:** Memory milti hai aur unme value store hoti hai: `undefined`.
2. **Function Declarations:** Pura ka pura function code uthakar memory me store ho jata hai! (Isi wajah se function ko define karne se pehle bhi call kar sakte hain — Hoisting).
3. **`let` & `const` variables:** Memory milti hai par wo **Temporal Dead Zone (TDZ)** me rehte hain (uninitialized).
4. **`window` / `global` object** aur `this` keyword bind ho jata hai.

#### Phase 2: Execution Phase (Code Running Phase)
Ab engine code ko line-by-line (top to bottom) execute karta hai:
1. Variables me unki real values assign hoti hain (`a = 10`).
2. Calculations hoti hain.
3. Jab koi function call aata hai (`greet()`), toh ek naya **Function Execution Context** banta hai aur Call Stack par push ho jata hai.

---

### 3. Call Stack: Last-In First-Out (LIFO) Highway

Call Stack ek vertical stack hai jo track karta hai ki kaunsa function abhi chal raha hai.

#### Code Walkthrough:
```javascript
var a = 10;

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

var square2 = square(a);
var square4 = square(4);
```

1. **Creation Phase:**
   - `a` = `undefined`
   - `square` = `function square(num) { ... }`
   - `square2` = `undefined`
   - `square4` = `undefined`
2. **Execution Phase:**
   - `a` = `10`
   - `square(a)` call hua -> Naya mini Execution Context bana -> `ans = 100` return hua -> Context destroy ho gaya!
   - `square2` = `100`
   - `square(4)` call hua -> Phir naya Context bana -> `ans = 16` return hua -> Destroy!
   - `square4` = `16`

---

### 4. Comparison Table: Creation Phase vs Execution Phase

---

### 5. Big Tech Real-World Trap: Stack Overflow

Agar tu bina base condition ke recursion likhta hai:

```javascript
function crashServer() {
    crashServer(); // Infinite Context creation!
}
crashServer();
```
Call Stack me continuously naye frames add hote rahenge jab tak browser ki memory limit (~10,000 frames) cross na ho jaye.  
Browser turant throw karega: **`RangeError: Maximum call stack size exceeded`**.

---

### 6. Interview Ke 3 Sawal Is Topic Se

1. **JavaScript Single-Threaded kyun kehlata hai?** -> Kyunki iske paas sirf ek Call Stack aur ek single Thread of Execution hota hai, line-by-line chalta hai.
2. **Hoisting kya hoti hai?** -> Creation Phase ke dauran variables aur functions ko code execute hone se pehle memory allocate ho jane ko Hoisting kehte hain.
3. **Execution Context kab destroy hota hai?** -> Jab function apna kaam khatam karke `return` kar deta hai, uska context stack se pop hoke garbage collect ho jata hai.

---
**Next Topic:** 08. Garbage Collection Mechanics & Memory Leak Profiling

Loading lesson content...

🎯 Big Tech Coding & Interview Challenges

Practice these curated problems. Click "Load in Sandbox" to solve live in the Code Studio!

2 Questions

Easy

1. Call Stack Depth Measurement

Write a function `measureStackDepth()` that recursively calls itself to calculate the exact maximum call stack size of the current JavaScript runtime environment.

💡 View Pro Interview Hint

• Use a try-catch block to catch RangeError and return depth.

Hard

2. Trampoline Pattern (Preventing Stack Overflow in Recursion)

Large recursions cause stack overflow. Implement a generic `trampoline(fn)` combinator that converts recursive tail-calls into an iterative while-loop, allowing 1,000,000+ recursive steps without stack overflow.

                                        trampoline(recursiveSum(1000000)) -> 500000500000 without crashing!                                    

💡 View Pro Interview Hint

• Return a function (thunk) instead of invoking recursively.

JavaScript

Full IDE

Live Execution Terminal

Click "Execute Live" to run code.
                

🎯 Big Tech Coding & Interview Challenges

1. Call Stack Depth Measurement

2. Trampoline Pattern (Preventing Stack Overflow in Recursion)

Lesson Mastery AI Quiz

AI Doubt Solver

CERTIFICATE OF COMPLETION

Rishabh Gehlot

PHP 8+ & Laravel 11 Master Track