How JavaScript works: macrotask vs microtask queue

Answer

JavaScript is single-threaded with an event loop:

1. Synchronous code runs on the call stack.
2. When the stack is empty, the loop drains the microtask queue completely (Promises, queueMicrotask, MutationObserver).
3. Then it takes one macrotask (setTimeout, setInterval, I/O, UI events), runs it, and again drains all microtasks.

So microtasks always run before the next macrotask.