Event Loop
A clear explanation of the JavaScript event loop, macrotasks vs microtasks, and how async code is scheduled.
Short explanation
The event loop is the mechanism that allows JavaScript (single-threaded) to perform asynchronous operations without blocking the main thread. It coordinates the call stack, the task queues (macrotasks), and the microtask queue.
Syntax / small snippet
console.log('start');
setTimeout(() => console.log('timeout'), 0);
Promise.resolve().then(() => console.log('promise'));
console.log('end');
// Expected order: start, end, promise, timeout
How JS handles it internally
- The call stack runs synchronous code first.
- Asynchronous callbacks (like setTimeout) are scheduled into the macrotask queue by the browser/runtime.
- Promise resolutions go into the microtask queue which has higher priority and runs after the current stack clears but before the next macrotask.
Diagram
Related
🔗 Related:
FAQ
Q: Why does promise then run before setTimeout with 0ms?
A: Promise callbacks are queued as microtasks, which are processed before macrotasks like setTimeout.
Q: Is the event loop single-threaded?
A: The JavaScript runtime is single-threaded for JS execution, but browsers and Node use multiple threads for I/O and other tasks under the hood.