⚙️ Day 34 — Event Loop, Call Stack & Async Internals

Hi Guys Welcome to Day 34 🔥 So far you’ve written asynchronous code using callbacks and promises. But have you ever wondered how JavaScript handles multiple tasks at once if it’s single-threaded? Today we’ll visualize the Call Stack, Event Loop, Callback Queue, and Microtask Queue.

🧩 1️⃣ The Call Stack

The Call Stack keeps track of function execution order. It follows the LIFO (Last In First Out) principle.

function first(){ console.log("First"); }
function second(){ console.log("Second"); }
function third(){ console.log("Third"); }

first();
second();
third();

Each function is pushed onto the stack and popped off when finished. If something never ends (recursive without exit), you get a Stack Overflow Error.

⚡ 2️⃣ Asynchronous Operations

JavaScript can’t wait for slow tasks (like API calls or timers). It delegates them to the browser and moves on.

console.log("Start");

setTimeout(()=>console.log("Timeout done"),0);
Promise.resolve().then(()=>console.log("Promise resolved"));

console.log("End");

Output sequence:

Start  
End  
Promise resolved  
Timeout done

Why? Because Promises go to the Microtask Queue and are handled before Callback Queue (timers, events).

🧠 3️⃣ Visualizing the Event Loop

The Event Loop continuously checks the Call Stack. If it’s empty, it takes the first task from the Microtask Queue or Callback Queue and executes it.

• Call Stack — Executes your main code.
• Web APIs — Handles timers, DOM events, fetch requests.
• Callback Queue — Stores completed callbacks (setTimeout, event listeners).
• Microtask Queue — Handles Promises and mutation observers.

📦 4️⃣ Example: setTimeout vs Promise

console.log("1");

setTimeout(()=>console.log("2 from timeout"),0);
Promise.resolve().then(()=>console.log("3 from promise"));

console.log("4");

Output: 1 → 4 → 3 → 2 Promises always run before timeouts because they use the microtask queue.

🧩 5️⃣ Blocking vs Non-Blocking

A blocking operation stops further execution (e.g., while loop, large computation). A non-blocking operation lets the Event Loop continue.

console.log("Blocking example start");
for(let i=0;i<1e9;i++){} // freezes browser
console.log("End");

In real apps, offload heavy tasks to Web Workers or split them using setTimeout to avoid freezing the UI.

💡 6️⃣ Async/Await and the Event Loop

Async functions are just syntactic sugar over Promises. When you use await, the function pauses execution and returns control to the Event Loop.

async function showOrder(){
  console.log("Fetching order...");
  let data = await Promise.resolve("Order Ready 🍔");
  console.log(data);
}
console.log("Before order");
showOrder();
console.log("After order");

Output: Before order → Fetching order → After order → Order Ready 🍔 because the awaited promise is handled asynchronously via the Event Loop.

🧮 7️⃣ Practice Tasks

1. Write code that uses Promise and setTimeout to print numbers in specific order.
2. Simulate a slow network call and observe how the Event Loop handles it.
3. Draw a diagram of Call Stack + Microtask Queue + Callback Queue for the above example.

🎯 Summary

You’ve now peeked inside the heart of JavaScript’s runtime. The Event Loop is what makes JS feel multithreaded even though it’s not. Tomorrow, you’ll learn how to organize large apps with Design Patterns for cleaner, reusable code.

← Prev Next →