{"post":{"slug":"what-is-the-event-loop-2026","title":"What is the event loop in 2026? Tracing code step by step","excerpt":"The event loop decides what runs next when your code has a call stack, a microtask queue, and a callback queue all waiting. Here is how to trace it.","category":"code","date":"July 24, 2026","author":"ByteLedger Team","content":"<span class=\"dropcap\">T</span>he event loop is the rule JavaScript uses to decide what runs next whenever more than one piece of code is waiting to execute. Rather than memorizing the output of specific examples, it is faster in the long run to learn the three places code can sit: the call stack, the microtask queue, and the callback queue, and the fixed order the engine checks them in. Once that order is automatic, predicting the output of any snippet, including the ones interviewers like to ask about, becomes mechanical instead of guesswork.\n\n## What changed in 2026\n\n- **DevTools now visualize this directly.** Chrome and Firefox performance panels show the call stack, microtask queue, and task queue as separate lanes, turning a formerly abstract mental model into something you can actually watch happen on a real page.\n- **Alternative runtimes converged on the same ordering.** Bun and Deno both implement the same microtask-before-macrotask ordering as Node.js and browsers, so the mental model in this guide transfers across runtimes even though the underlying implementation differs.\n- **Execution-order questions remain a fixture of interviews.** Predicting console output across timers and promises is still common in front-end interviews in 2026, precisely because it is quick to ask and reveals whether a candidate has a real mental model or a memorized answer.\n\n## The three places code can be\n\nCode is either running on the call stack right now, waiting in the microtask queue, or waiting in the callback queue, sometimes called the macrotask queue. The call stack holds synchronous code as it executes. The microtask queue holds promise callbacks and anything scheduled with `queueMicrotask`. The callback queue holds timer callbacks, I/O callbacks, and UI events. The rule that ties them together: the call stack must fully empty, then every pending microtask runs, including new ones scheduled along the way, then exactly one macrotask runs, and the cycle repeats.\n\n## Trace this snippet\n\n```js\nconsole.log(\"1\");\n\nsetTimeout(() => console.log(\"2\"), 0);\n\nPromise.resolve().then(() => console.log(\"3\"));\n\nconsole.log(\"4\");\n```\n\n`console.log(\"1\")` runs immediately on the call stack. `setTimeout` schedules its callback on the callback queue and returns immediately, logging nothing yet. `Promise.resolve().then(...)` schedules its callback on the microtask queue and also returns immediately. `console.log(\"4\")` runs immediately on the call stack. Only once the stack is empty does the event loop drain the microtask queue, logging `3`. Only after the microtask queue is empty does it take exactly one macrotask, logging `2`. The final order is `1, 4, 3, 2`, not the order the lines appear in and not the order they were scheduled in.\n\n## What goes where\n\n| API | Queue | Runs relative to synchronous code |\n| --- | --- | --- |\n| Plain top-level code | Call stack | Immediately, in order |\n| `Promise.then`, `queueMicrotask`, resuming after `await` | Microtask queue | After the stack empties, before any macrotask |\n| `setTimeout`, `setInterval` | Callback (macrotask) queue | After the stack empties and all microtasks are drained |\n| DOM and UI events, I/O callbacks | Callback (macrotask) queue | Same tier as `setTimeout` |\n\n## The rule that predicts every snippet\n\nRun all synchronous code on the call stack until it is empty. Drain the entire microtask queue, including any new microtasks scheduled by microtasks that just ran. Run exactly one macrotask. Return to draining microtasks. Applied mechanically, this four-step loop predicts the output of any ordering question, including nested promise chains and timers scheduled inside other timers.\n\n## Common mistakes\n\nAssuming a zero-delay `setTimeout` runs immediately is the most common one; it still waits for the stack to empty and every pending microtask to drain first, which is often a measurable amount of real time later. A long promise chain can starve a timer callback, because a microtask that schedules another microtask lets that new one run before the next macrotask gets a turn. Treating `async` and `await` as a separate model is also a mistake: the code after an `await` resumes as a microtask, following exactly the rules above. See [callbacks vs promises vs async await](/blog/callbacks-vs-promises-vs-async-await-2026) for how all three styles map onto this same underlying schedule.\n\n## FAQ\n\n**Is the event loop part of the JavaScript language itself?**\nNo. It is provided by the runtime, the browser or Node.js, rather than the language specification, though the specification does define how promise microtasks behave.\n\n**Why do microtasks always run before macrotasks?**\nBy design. The intent behind promises was for a resolved value to feel close to immediate, so its callback jumps ahead of anything scheduled with a timer, even a zero-delay one.\n\n**Can the call stack and event loop run at the same time?**\nNo. Only one runs at a time on a given thread. The event loop only checks its queues once the call stack is completely empty, which is why a long synchronous function blocks everything else.\n\n**Is this the same event loop model in Node.js and the browser?**\nThe stack-then-microtasks-then-macrotask rule is the same, but Node.js adds extra macrotask phases and its own early queue that runs before other microtasks. The core mental model described here still applies in both.\n\n## Where to go next\n\n- [Callbacks vs promises vs async await in 2026](/blog/callbacks-vs-promises-vs-async-await-2026)\n- [What is a closure in JavaScript in 2026](/blog/what-is-a-closure-in-javascript-2026)\n- [What is hoisting in JavaScript in 2026](/blog/what-is-hoisting-in-javascript-2026)","hue":290,"metaTitle":"What Is the Event Loop in 2026? Trace It Step by Step","metaDescription":"What is the event loop in 2026? Trace a real code snippet through the call stack, microtask queue, and callback queue to predict its exact output.","keywords":["what is the event loop 2026","javascript call stack explained","microtask queue vs callback queue","event loop trace example","event loop interview question","settimeout vs promise order","javascript execution order","how javascript runs code","event loop step by step","call stack vs event loop"],"tldr":["**The call stack runs one thing at a time and must empty before anything else runs** — every synchronous line finishes before the event loop looks at any queue.","**The microtask queue always drains before the next macrotask** — every pending promise callback runs before the next timer callback, no matter which was scheduled first.","**Tracing execution order is mechanical once you know the three places code can wait** — the call stack, the microtask queue, and the callback queue.","**This is one of the most common live-coding interview questions** — predicting console output order across timers, promises, and synchronous code.","**Skip:** memorizing output order for specific snippets; learn the stack-then-microtasks-then-macrotask rule instead, since it predicts every snippet, not just the one you memorized."],"readTime":"4 min read","wordCount":882},"related":[{"slug":"what-is-the-single-responsibility-principle-2026","title":"What is the single responsibility principle in 2026?","excerpt":"The single responsibility principle says a class or module should have one reason to change. Here is what that means in practice and where it gets misapplied.","category":"code","date":"July 24, 2026","author":"ByteLedger Team","readTime":"4 min read","hue":280},{"slug":"what-is-a-callback-2026","title":"What Is a Callback in 2026: functions passed to functions","excerpt":"A callback is a function you hand to another function so it can be run later, often when some task finishes. Here is what a callback is and how it works in plain language.","category":"code","date":"June 9, 2026","author":"ByteLedger Team","readTime":"3 min read","hue":222},{"slug":"what-is-hoisting-in-javascript-2026","title":"What is hoisting in JavaScript in 2026? var, let, and const","excerpt":"Hoisting moves variable and function declarations to the top of their scope before code runs. Here is how var, let, const, and functions actually behave.","category":"code","date":"July 23, 2026","author":"ByteLedger Team","readTime":"4 min read","hue":260}],"sameCategory":[{"slug":"bazel-build-explained-2026","title":"Bazel Explained: What Hermetic Builds Actually Cost","excerpt":"Bazel delivers reproducible, precisely cached builds and demands that you describe everything. Here is what you get, what it costs, and who should say no.","category":"code","date":"August 19, 2026","author":"ByteLedger Team","readTime":"3 min read","hue":145},{"slug":"graphql-federation-2026","title":"GraphQL Federation: One Graph, Many Teams","excerpt":"Federation composes independently-owned subgraphs into a single API. Here is what it solves, the operational cost it adds, and when a simpler gateway is enough.","category":"code","date":"August 19, 2026","author":"ByteLedger Team","readTime":"3 min read","hue":300},{"slug":"hermetic-builds-explained-2026","title":"Hermetic Builds Explained: Same Inputs, Same Output","excerpt":"A hermetic build depends only on declared inputs. Here is what that property gives you, the common leaks that break it, and how to move toward it incrementally.","category":"code","date":"August 19, 2026","author":"ByteLedger Team","readTime":"3 min read","hue":130},{"slug":"monorepo-tooling-compared-2026","title":"Monorepo Tooling Compared: What You Actually Need","excerpt":"Monorepo tools solve task orchestration and caching, not repository layout. Here is what each tier provides and how to tell when you have outgrown the simple option.","category":"code","date":"August 19, 2026","author":"ByteLedger Team","readTime":"3 min read","hue":150}],"newer":{"slug":"what-is-the-eu-ai-act-2026","title":"What Is the EU AI Act? The 2026 Explainer","excerpt":"The EU AI Act sorts AI systems into risk tiers with obligations that scale accordingly. Here is what the law actually requires in 2026, who it applies to, and the deadlines that matter.","category":"ai","date":"July 24, 2026","author":"ByteLedger Team","readTime":"4 min read","hue":305},"older":{"slug":"what-is-the-single-responsibility-principle-2026","title":"What is the single responsibility principle in 2026?","excerpt":"The single responsibility principle says a class or module should have one reason to change. Here is what that means in practice and where it gets misapplied.","category":"code","date":"July 24, 2026","author":"ByteLedger Team","readTime":"4 min read","hue":280}}