Event Loop Prioritizes Microtasks Over Macrotasks

JavaScript is single-threaded, but async code doesn’t just run whenever it feels like it. The engine processes: The call stack Then microtasks (Promises) Then macrotasks (setTimeout, etc.) Which means this: console.log("Start"); setTimeout(() => console.log("Timeout"), 0); Promise.resolve().then(() => console.log("Promise")); console.log("End"); Logs: Start End Promise Timeout Even with 0ms, setTimeout waits until the microtask queue is empty. Once I understood that, async bugs stopped feeling random. The event loop isn’t just trivia, it’s how you reason about timing instead of guessing. #JavaScript #EventLoop #AsyncProgramming #WebDevelopment

If you understand this, you understand async JavaScript. There are TWO important queues: 1️⃣ Microtask Queue 2️⃣ Macrotask Queue Example: console.log("Start"); setTimeout(() => console.log("Timeout"), 0); Promise.resolve().then(() => console.log("Promise")); console.log("End"); Output: Start End Promise Timeout Why? Execution order: Run synchronous code Empty Microtask queue Take one Macrotask Repeat Microtasks include: • Promise callbacks • queueMicrotask Macrotasks include: • setTimeout • setInterval • I/O Promise always runs before setTimeout. This is critical when debugging race conditions. #javascript #eventloop #webdevelopment #frontend

JavaScript Event Loop — Microtask vs Macrotask setTimeout(() => console.log("Timeout"), 0) Promise.resolve().then(() => console.log("Promise")) Output: Promise Timeout Why? Because: • Promise callbacks go to the Microtask queue • setTimeout goes to the Macrotask queue • Microtasks run before Macrotasks Understanding the event loop helps avoid async confusion and race conditions. If you know this, debugging async becomes much easier. #JavaScript #EventLoop #AsyncProgramming #Frontend

Day 13/30: Uploading More Than Just Images 🖼️⚡ One step closer to the halfway point! For Day 13 of my #30DaysOfCode challenge, I built a functional Image Uploader using Vanilla JavaScript. While it looks simple, this project was a great exercise in: File Handling: Reading user-selected files directly from the browser. Object URLs: Using URL.createObjectURL() to generate instant local previews. Event Management: Registering listeners correctly to avoid duplicate stacking. State Reset: Clearing input.value so the same file can be re-uploaded. It's projects like these that remind you how much power the browser already has — no libraries needed! Live Demo: https://lnkd.in/d5QH9guT Onwards to Day 14! #30DaysOfCode #JavaScript #WebDevelopment #FrontendDev #BuildInPublic #100DaysOfCode #VanillaJS

Debugging Lesson Today Today I fixed a UI issue where my website was stuck on a loading spinner. At first, it looked like the whole page was broken, but the real issue was simple. The spinner element had a show class that was never removed by JavaScript. Here’s how I debugged it: - Checked browser console for errors - Verified all JS libraries were loading correctly - Inspected the DOM - Found that the spinner class wasn’t being removed - Added the missing spinner removal logic Small bug. Big lesson. Debugging is not guessing, it’s systematic thinking. #WebDevelopment #Frontend #Debugging #LearningInPublic

JS is single-threaded. But handles async? The secret → The Event Loop. Call Stack = running NOW Callback Queue = waiting Event Loop = when stack is empty, push from queue That's it. Not magic. Just clever delegation. 🔄 #JavaScript #EventLoop #WebDev #LearnToCode

💡 JavaScript Event Bubbling vs Capturing — a common misconception Ever clicked an element and expected 6 console logs, but only got 3? You’re not crazy — this is a classic DOM events gotcha. 👉 Key insight: Events always go through both capturing and bubbling phases, but listeners only fire in the phase they’re registered for. addEventListener('click', handler, true) That true means: ➡️ “Listen only during the capturing phase” So if you register: 3 capture listeners 0 bubble listeners You’ll see 3 logs, not 6 — even though bubbling did happen. To get all 6 logs, you must explicitly register both: capture listeners (true) bubble listeners (default) 🧠 Mental model that sticks: Capture = top → down Bubble = target → up No listener = no log Understanding this saves hours of debugging... #JavaScript #WebDevelopment #Frontend #DOM #LearningInPublic #SoftwareEngineering

⚡ Microtask vs Macrotask Why does Promise.then() run before setTimeout() — even when the delay is 0 ms? Most developers think 0 ms means “immediately”. But JavaScript has a different rule. Here’s what actually happens: 1️⃣ Call Stack executes 2️⃣ All Microtasks run 3️⃣ One Macrotask runs 4️⃣ Repeat And since Promises go to the Microtask Queue, they execute BEFORE Macrotasks like setTimeout(). That’s why: Promise > setTimeout Understanding this small detail can completely change how you debug async code. 💬 Quick Question: What will log first? setTimeout(() => console.log("A"), 0) Promise.resolve().then(() => console.log("B")) Comment your answer 👇 #JavaScript #WebDevelopment #FrontendDeveloper #AsyncProgramming #EventLoop #KeepCoding

🚀 Redux Toolkit Made Simple! Understanding Redux doesn’t have to be confusing anymore. 👉 Just remember this simple flow: Slice → Action → Reducer → Store → UI Update 💡 Trick to remember: “S.A.R.S.U” (Slice, Action, Reducer, Store, UI) With Redux Toolkit: ✔️ You write less boilerplate ✔️ Logic stays clean & scalable ✔️ State management becomes predictable ✨ Pro Tip: Use createAsyncThunk() for handling API calls easily. #Redux #ReduxToolkit #ReactJS #FrontendDevelopment #WebDevelopment #JavaScript #LearningInPublic

Closure behavior with asynchronous code Consider: for (var i = 0; i < 3; i++) { setTimeout(() => console.log(i), 1000); } Output: 3 3 3 Reason: var is function scoped. All callbacks reference the same variable. When loop finishes: i = 3 Solution using let: for (let i = 0; i < 3; i++) { setTimeout(() => console.log(i), 1000); } Output: 0 1 2 let creates new binding each iteration. Understanding lexical scope is essential for predictable behavior. #javascript #frontend