Event Loop
The mechanism that allows JavaScript to perform non-blocking I/O operations despite being single-threaded.
Detailed Explanation
JavaScript executes code on a single thread, but it can handle asynchronous tasks (like API calls or timers) by offloading them to the browser environment. The Event Loop constantly monitors the Call Stack and the Callback Queue. When the stack is empty, it pushes the first task from the queue onto the stack for execution. This is what allows a web page to remain responsive while waiting for data to load.
Quick Summary
The event loop is the scheduler that gives JavaScript its concurrency model: a single thread executes synchronous code, while callbacks for I/O, timers, and Promises wait in queues and run only when the stack is empty.
Key Takeaways
- JavaScript itself is single-threaded; concurrency comes from the host (browser or Node.js) running I/O outside the JS thread.
- Microtasks (Promise callbacks, queueMicrotask) drain completely between every macrotask.
- Macrotasks (setTimeout, I/O, UI events) run one at a time and yield to rendering and microtasks afterwards.
- Long synchronous code blocks the loop and freezes the UI, every long task delays everything else.
- Knowing the order microtasks vs macrotasks run in explains most async ordering surprises.
When to use it
- Reasoning about why a Promise resolves before a setTimeout(0) that was scheduled first.
- Diagnosing UI jank with the Performance panel, long tasks show up as blocks of the main thread.
- Designing CPU-heavy work to be broken into chunks with requestIdleCallback or setTimeout to keep the page responsive.
- Understanding Node.js timing of process.nextTick vs setImmediate vs Promise resolutions.
Common Mistakes
- Calling an async function and assuming it runs immediately, it returns a Promise and the body runs at the next microtask.
- Mixing setTimeout and Promise.then and being surprised by the ordering of the callbacks.
- Blocking the event loop with a synchronous JSON.parse on a huge payload or a tight loop over millions of items.
- Awaiting inside a hot loop sequentially when the work could run in parallel via Promise.all.
Event Loop, Frequently Asked
Is JavaScript really single-threaded?
The JS execution context is. Web Workers and service workers run on separate threads with their own event loops; they communicate by message passing rather than shared memory.
What is the difference between a microtask and a macrotask?
Microtasks (Promise.then, queueMicrotask) run after the current task and before the next one, the queue is drained fully. Macrotasks (setTimeout, I/O, click handlers) run one per loop iteration with rendering in between.
Why does setTimeout(fn, 0) not run immediately?
It is queued as a macrotask. Any currently-executing code finishes, all pending microtasks run, then the event loop picks up the next macrotask. The 0 ms is a minimum, not a guarantee.