JavaScript Event Loop Ne Mujhe Mental Banaya (Fr)
So like—idk how to start this without sounding dramatic, but the JavaScript Event Loop legit made me question my existence for a week straight. I thought I understood JS. I really did. I was like “haan bhai DOM aa gaya, functions aa gaye, even async/await dekh liya…” but then this monster popped out: “Explain the JavaScript Event Loop.” Bro. Mere haath kaanp gaye.
Like you know that moment when you plug in your charger but phone charge nahi le raha and you’re just staring at it like “kyun bhai kya maine kia?” — same energy.
Callback Hell, Promises, Aur Broken Sleep Cycles
Pehli dafa jab setTimeout() ke andar console.log() chalaya na, aur socha pehle wala log pehle print hoga… but nahi, dusra print hua pehle. And I was like… hello? Kya ho raha hai yahaan?
Google kiya. Mil gaya: Event Loop explained in 5 minutes. Lol. Bhai 5 din lag gaye samajhne mein.
The real L started when I was doing a simple API call and trying to chain .then() methods. Kabhi data aata nahi, kabhi console mein kuch weird sa stack trace likha hota. I literally rage-quit VS Code, made chai, stared at the wall like I just came back from war.
Okay but like—WTH is the Event Loop?
Let me try explaining this jaise I wish kisi ne mujhe samjhaya hota:
JS is single-threaded, okay? One line at a time. Like ek banda jo multitasking ka natak toh karta hai but asal mein sab kuch line se hi karta hai. That’s the call stack. Ek kaam chalu ho, uske baad hi doosra.
Ab, when you do async stuff like setTimeout(), fetch(), ya promises, wo JS ka kaam nahi hota directly. Wo Web APIs ko de diya jata hai handle karne ke liye. Like “bhai tu dekh le, mujhe dusra kaam karne de.”
Web APIs ka kaam jab complete hota hai, toh wo event ko queue mein daal dete hain. Event Loop ka kaam hai dekhna ke call stack khali hai ya nahi. Agar khali hai, toh queue se event utha ke stack mein bhejta hai.
Bas. Yeh loop chalta rehta hai jab tak browser chal raha hai. Infinite chakkar. Like desi aunty ke rishtay wale sawal — kabhi khatam nahi hota.
Microtasks vs Macrotasks: Iss confusion ne toh neend uda di
One night I was debugging something and realized my Promise.resolve().then() block was running before setTimeout() even though timeout ka delay zero tha.
I literally said out loud: “Yeh kya ch****pa hai?”
Turns out, microtasks (like promises) have higher priority than macrotasks (like setTimeout). So event loop pehle sare microtasks clear karega, then move karega macrotasks pe.
It’s like… tumhara dost bola “2 minute mein aa raha hoon” (setTimeout), but uske pehle ek aur banda bola “bas ek line bolni hai” (promise). Aur tumhare brain ne bola “chalo pehle yeh line sun lete hain.”
Real Story: Callback Ne Interview Bigaad Diya 😭
I had an interview with a startup. Thought it was gonna be chill. Unhone bola: “Can you explain how the Event Loop handles asynchronous functions?”
Mera dimaag black ho gaya.
I gave some half-baked answer involving “timeouts and promises and stuff like… event listeners?” Bro they didn’t even respond after that. Ghosted. Like a bad Tinder match.
But lowkey I deserved it. Because I was parroting terms I didn’t even deeply understand. Tab decide kia: samajhna padega yeh Event Loop varna yeh loop meri zindagi loop bana dega.
It Finally Clicked — After Dozens of Console Logs & Chai Cups
I made a dumb habit of logging everything:
console.log('1');
setTimeout(() => console.log('2'), 0);
Promise.resolve().then(() => console.log('3'));
console.log('4');
Expected: 1, 2, 3, 4
Reality: 1, 4, 3, 2
I cried.
But then it clicked.
console.log('1')runs — goes on call stack.setTimeout()— offloaded to Web API, callback goes to macrotask queue.Promise.resolve()— microtask added.console.log('4')runs.- Stack empty now — Event Loop picks microtask (
console.log('3')) - Stack empty again — picks macrotask (
console.log('2'))
Once I saw that pattern 10–15 times with variations, tab jaa ke dimaag mein batti jali.
Tbh, Nobody Tells You This Part…
Most tutorials either oversimplify it (“JS is async lol”) or throw diagrams at your face that look like airplane cockpit circuits.
Koi nahi batata ke you’ll feel stupid for days. And that’s okay.
It’s literally how brains work. Pehle fail hote ho. Phir resist karte ho. Phir accept karte ho ke “haan bhai, mein dumb ho.” And then the click happens.
I swear I was about to drop JavaScript that week. Switch to Python. Move to mountains. Start goat farming.
Side Note: Yehi Cheez React mein bhi hoti hai
If you’re using useEffect() and getting weird logs or updates — bhai woh bhi Event Loop ka khel hai. State update async hoti hai. React ka scheduler bhi Event Loop ke upar hi dance karta hai. So samajh lo yeh topic toh har jagah ghusa hua hai.
Ending Thoughts (Ya Brain Meltdown)
Anyway. If you’re struggling with the Event Loop, bro I feel you. Yeh koi easy topic nahi hai, aur YouTube ke “5-min explainers” sirf aur confuse karte hain.
Best advice:
Log everything.
Draw timelines.
Make dumb examples.
Cry a little.
Repeat.
Once you get it — like really get it — suddenly async JS feels less like black magic aur zyada like… okay, thoda si controlled madness.
Anyway. This got deep real fast. Chai thandi ho gayi. Good luck if you’re tryna learn this too. And if koi bole “Event Loop easy hai”—punch them with a setTimeout() callback 😤
Other wise if you have any problem feel free to contact us or comment down below : Contact us
BONUS :
🔗 1. The Ultimate Guide — by Jake Archibald (Google Devs)
Honestly legendary. Explains tasks, microtasks, rendering phases — saari madness with visuals.
👉 https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/
🔗 2. MDN Docs – Event Loop (Mozilla)
Thoda formal hai, lekin foundational concepts ko clear karne ke liye this is pure gold.
👉 https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop
🔗 3. Philip Roberts – “What the heck is the event loop?” (JSConf Talk)
Ye YouTube video basically required viewing hai. Tired brain ke liye audio-visual samajh.
👉 https://www.youtube.com/watch?v=8aGhZQkoFbQ
🔗 4. Latency & Loops — Node.js Event Loop Deep Dive
Node.js mein kaise kaam karta hai Event Loop — agar tu backend bhi kar raha toh must-read.
👉 https://nodejs.org/en/docs/guides/event-loop-timers-and-nexttick
🔗 5. Visualizer Tool (Fun Interactive Toy)
Try kar ke dekh — JS Event Loop simulator jaise real-time dekhta hoon kya chalu ho raha hai.
👉 https://latentflip.com/loupe
Bonus 🔥 Reddit Thread (dev pain is real):
For vibes & emotional validation:
👉 https://www.reddit.com/r/learnprogramming/comments/qmwh19/eli5_javascript_event_loop/
.
Stay Safe, Stay Real PEACE. 💕
