Day 31

Event Loop & Call Stack

13 min

JavaScript 100 Days

JavaScript ek waqt mein sirf ek kaam karta hai (single-threaded) — lekin async code kaise chalata hai? Event Loop ka jaadu! Call Stack, Web APIs, aur Callback Queue mein code ka safar samjho.

Call Stack

Call Stack mein functions ek ke baad ek push/pop hote hain. LIFO (Last In, First Out) order.

call-stack.js

javascript

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

first();
// Stack: first → second → third
// third pops, second pops, first pops

Event Loop

Event Loop continuously Call Stack check karta hai — agar empty ho to Callback Queue se task uthata hai.

event-loop.js

javascript

console.log("1 — Start");

setTimeout(() => {
  console.log("3 — setTimeout callback");
}, 0); // 0ms — but still goes to queue!

console.log("2 — End");

// Output order:
// 1 — Start
// 2 — End
// 3 — setTimeout callback  ← event loop ne queue se uthaya

🎯 Practice Challenge

3 nested setTimeout banao — kaunsa pehle chalega? Pehle predict karo phir run karo.

Project: Weather AppMicrotasks & Macrotasks