The JavaScript Event Loop: Kitchen Analogy

| mental-model

Think of JavaScript as a single-threaded waiter in a restaurant (the Runtime).

The Players

  1. Call Stack (The Waiter): Can only do one thing at a time. Taking an order, serving a plate.
  2. Web APIs (The Kitchen): Where work happens in the background (timers, fetch requests). The waiter hands off the order here and goes back to work.
  3. Callback Queue (The Pick-up Counter): When the kitchen is done, they put the food (callback) here.
  4. Event Loop ( The Manager): Continually checks: “Is variable Stack empty? AND Is there something in the Queue?”

The Flow

  1. console.log('Start') -> Waiter serves water immediately.
  2. setTimeout(..., 0) -> Waiter hands order to kitchen. Kitchen immediately puts it on the Pick-up Counter.
  3. console.log('End') -> Waiter serves bread.
  4. Stack is empty. Manager sees food on counter.
  5. Waiter serves the setTimeout callback.

This is why setTimeout(..., 0) doesn’t run immediately—it has to wait for the stack to clear!