🔁 Event Loop & Event Bubbling
Last Updated: 27th October 2025
- The Event Loop is the core mechanism that makes JavaScript asynchronous.
- It helps JS handle multiple tasks without blocking the main thread — even though JS runs single-threaded.
How It Works
- Call Stack: This is where JavaScript keeps track of functions currently being executed.
- Web APIs / Node APIs: These handle async tasks (like setTimeout, fetch, or DOM events) outside the main thread.
- Callback Queue / Task Queue: Once async tasks finish, their callback functions move here, waiting for execution.
- Event Loop: Keeps checking — “Is the call stack empty?”.If yes, it moves the next callback from the queue to the stack.
Visual Flow Example
Call Stack Web API Task Queue
----------- -------- -----------
main() setTimeout() → (after delay)
➡ JS executes main() ➡ setTimeout() goes to Web API ➡ After delay, its callback is queued ➡ Event Loop moves it to Stack when empty
Example:
console.log("1");
setTimeout(() => {
console.log("2");
}, 0);
console.log("3");
// Output:
// 1
// 3
// 2
🗣 Hinglish Tip:Event loop bolta hai — “pehle main kaam khatam karu, phir queue wale kaam kar lunga!” That's why 2 prints at the end even though its delay is 0
