02 How JavaScript code is Executed & Call Stack

---

🚀 JavaScript Code Execution Process

JavaScript is a single-threaded, synchronous, non-blocking language that uses an event-driven model with a call stack, heap, Web APIs, task queue, and event loop.

---

🔁 Step-by-Step: How JS Executes Code

1. Parsing & Compilation Phase

   • Code is parsed by the JS engine (e.g., V8 in Chrome).

   • Function and variable declarations are hoisted.

   • Scope and memory are set up.

2. Execution Phase

   • Code runs top to bottom, line by line.

   • Functions are pushed/popped from the call stack when invoked.

   • Variables are resolved using the scope chain.

---

📚 Components of JavaScript Runtime

1. Call Stack

A LIFO (Last In, First Out) structure that tracks function calls.

function a() {
  b();
}

function b() {
  console.log("Hello");
}

a();

🔍 Call Stack Flow:

Global()
→ a()
   → b()
      → console.log()

Stack Push/Pop:

• Global() → pushed first

• a() → pushed

• b() → pushed

• console.log() → pushed → popped

• b() → popped

• a() → popped

• Global() → popped

---

2. Memory Heap

• Where all objects, arrays, and functions are stored.

• Unstructured region for dynamic memory allocation.

---

3. Web APIs (Browser Environment)

JS has access to browser-provided APIs like:

• setTimeout

• DOM Events

• Fetch/XHR

  These run outside the JS engine.

---

4. Callback / Task Queue

After a Web API (like setTimeout) finishes, it sends the callback to the task queue, waiting for the call stack to be empty.

---

5. Event Loop

• Continuously checks if the call stack is empty.

• If it is, it moves the first task from the queue to the stack.

---

⏱️ Example with setTimeout

console.log("1");

setTimeout(() => {
  console.log("2");
}, 0);

console.log("3");

Output:

1
3
2

🔄 What Happens:

1. console.log("1") → Call Stack → logs 1

2. setTimeout → Web API → after 0ms → pushes callback to queue

3. console.log("3") → Call Stack → logs 3

4. Call Stack is now empty → Event Loop moves callback → Call Stack → logs 2

---

🧠 Key Concepts

---

🎯 Visual Summary

  ┌─────────────┐        ┌────────────┐
  │ Call Stack  │        │ Task Queue │
  └────▲───┬────┘        └────┬───▲────┘
       │   │                   │   │
       │   └─ console.log()    │   └─ (After async complete)
       │                       │
       │   ┌─────────────┐     │
       └──▶│ Web APIs     │────┘
           └─────────────┘

---