JavaScript Event Loop Mechanism Explained

JavaScript runs on a single thread with one call stack, meaning it can only execute one piece of code at a time. The event loop is the mechanism that enables asynchronous behavior despite this single-threaded nature. Here is how it works: first, the engine executes all synchronous code on the call stack. When async operations like setTimeout or fetch are encountered, they are handed off to Web APIs (browser) or libuv (Node.js), which handle them in separate threads. When an async operation completes, its callback is placed in a queue. There are two types of queues with different priorities. The microtask queue (for Promise.then/catch/finally, MutationObserver, queueMicrotask) has higher priority — after the call stack is empty, ALL pending microtasks are processed before anything else. If a microtask adds another microtask, it is also processed in the same cycle. The macrotask queue (for setTimeout, setInterval, setImmediate, I/O callbacks, UI events) has lower priority — only ONE macrotask is processed per event loop iteration, after which the microtask queue is drained again. So the cycle is: call stack → all microtasks → one macrotask → all microtasks → one macrotask → and so on. With async/await: code before the first await runs synchronously; the await expression and everything after it behaves like .then() — it goes into the microtask queue. For example: console.log(1); setTimeout(() => console.log(2), 0); Promise.resolve().then(() => console.log(3)); console.log(4); outputs 1, 4, 3, 2 — synchronous code first (1, 4), then microtask (3), then macrotask (2).