Navigate
Search topics, hooks, and fundamentals
JavaScript is single-threaded. The event loop is how it handles async operations without blocking — like a waiter managing multiple tables.
Think of JavaScript like a restaurant with one waiter:
Step through the event loop to see how synchronous code, promises, and setTimeout are processed in order:
Step 1/6: console.log("1: Take order") — pushed to call stack
Call Stack (waiter)
Web APIs (kitchen)
(empty)
Microtask Queue (priority)
(empty)
Macrotask Queue (callback)
(empty)
Console Output
This is the classic event loop quiz. Can you predict the output before reading the answer?
console.log("1: Take order"); // Call stack (immediate)
setTimeout(() => {
console.log("2: Food ready"); // Callback queue (after timer)
}, 0);
Promise.resolve().then(() => {
console.log("3: Check on table"); // Microtask queue (priority)
});
console.log("4: Greet new guest"); // Call stack (immediate)
// Output: 1, 4, 3, 2
// Synchronous first, then microtasks, then callbacksJavaScript can only execute one piece of code at a time. Long-running synchronous code blocks everything:
// JavaScript has ONE call stack — like one waiter
// It can only do one thing at a time
function takeOrder() {
console.log("Taking order..."); // blocks until done
heavyComputation(); // blocks the ENTIRE restaurant
console.log("Order taken"); // only runs after computation
}
// This is why setTimeout(fn, 0) doesn't run immediately
// — it waits for the call stack to be empty