What is the difference between microtasks and macrotasks?

Q: What is the difference between microtasks and macrotasks?

**Target Audience:** Engineers preparing for JavaScript event loop and async-queue interview questions. **Difficulty:** Medium > **How to read this doc:** Concepts are explained in plain language first, then tagged with 📌 Interview term: . Every result below was actually run on Node.js v24.19.0 — the printed output is real, captured output, not illustrative sample text. This doc focuses on MEMBERSHIP -- an exhaustive list of what actually lives in each queue; for the underlying call-stack mechanics, see Explain the event loop, call stack, and task queues. , and for the classic worked ordering example, see In what order do console.log, setTimeout, and Promise.then run? ## 1. Why This Even Matters — A Story First Imagine an office with two separate inboxes on one

The problem

Question presented to candidate: "What is actually the difference between a microtask and a macrotask in JavaScript -- not just one example, but which APIs belong to which queue, and what does draining actually mean?"

What a strong answer should cover:

Microtasks: Promise reactions (.then/.catch/.finally), queueMicrotask() callbacks, an await resumption, and (per the DOM spec) MutationObserver callbacks.
Macrotasks (also called tasks): setTimeout/setInterval callbacks, I/O completions, UI events like clicks, and in a browser, rendering/layout steps between tasks; Node.js adds setImmediate as an extra macrotask-like phase.
The defining behavioral difference is not what each queue contains, it is how much runs per pass: the ENTIRE microtask queue drains every time, including microtasks added during the drain, while only ONE macrotask runs before the loop checks microtasks again.
Node.js layers two extra, Node-only queues on top of the standard model: process.nextTick (drains before the standard microtask queue, every time) and setImmediate (a macrotask-like phase with its own ordering rules relative to timers).
A common, real consequence: code that keeps re-scheduling microtasks from within microtasks can starve every macrotask indefinitely, since the macrotask queue is never even checked until the microtask queue reports empty.

Clarifying questions expected:

"Do you want browser-only APIs like MutationObserver included, or should I keep this to what is common across browsers and Node.js?"

Code / implementation expected: Yes -- a short, runnable snippet demonstrating queueMicrotask, Promise.then, and setTimeout draining in the right relative order.

event-loop
microtask

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Engineers preparing for JavaScript event loop and async-queue interview questions. Difficulty: Medium

How to read this doc: Concepts are explained in plain language first, then tagged with 📌 Interview term:. Every result below was actually run on Node.js v24.19.0 — the printed output is real, captured output, not illustrative sample text. This doc focuses on MEMBERSHIP -- an exhaustive list of what actually lives in each queue; for the underlying call-stack mechanics, see Explain the event loop, call stack, and task queues., and for the classic worked ordering example, see In what order do console.log, setTimeout, and Promise.then run?

1. Why This Even Matters — A Story First

Imagine an office with two separate inboxes on one desk. The first inbox is for quick internal notes -- reply, forward, done in seconds -- and the rule is: clear this inbox COMP

The solution is hidden so you can try first

6 min read · 9 sections

Run the code

Edit the code and run it here. Each console line with an expected value becomes a test.

JavaScriptqueueMicrotask vs Promise.then vs setTimeout, browser-safe subset (run directly)