What is the JavaScript event loop, and how does it handle asynchronous operations?

Question

Accepted Answer

The event loop is the mechanism that allows JavaScript to perform non-blocking operations despite being single-threaded. It continuously checks if the call stack is empty, and if so, moves callbacks from the task queues to the stack.

Here is how it works. JavaScript has a call stack where function executions are tracked. When you call a function, it goes on the stack. When it returns, it comes off.

For asynchronous operations like setTimeout, fetch, or event listeners, JavaScript delegates these to the browser's Web APIs. The main thread continues executing other code. When the async operation completes, its callback is placed in a queue.

There are two main queues. The microtask queue handles promises, queueMicrotask, and MutationObserver. The macrotask queue handles setTimeout, setInterval, and I/O operations.

The event loop follows this priority. First, it executes everything in the call stack. Then, it processes all microtasks. Then, it takes one macrotask and executes it. Then, it processes all microtasks again. This cycle repeats continuously.

A practical example. If you have setTimeout with zero delay, it still goes to the macrotask queue. A Promise.resolve().then() goes to the microtask queue. The promise callback will execute before the timeout callback, even if the timeout was registered first.

Understanding the event loop helps you predict code execution order and avoid common pitfalls like blocking the main thread with heavy synchronous operations.