🔁The JavaScript Event Loop
Draw the JavaScript event loop on a whiteboard from memory, then predict the output of any mixed sync/async code — and instrument a real program to prove you're right.
Phase 1Mapping the Event Loop
Draw the call stack, queues, and loop itself
JavaScript is single-threaded, but never alone
6 minJavaScript is single-threaded, but never alone
The stack is the only thing actually running
6 minThe stack is the only thing actually running
The task queue is a waiting line, not a schedule
6 minThe task queue is a waiting line, not a schedule
Stack, queues, loop — one sketch you'll reuse forever
7 minStack, queues, loop — one sketch you'll reuse forever
Phase 2Predicting Async Output
Predict output of setTimeout, Promise, and sync chains
Promises cut the line — every time
6 minPromises cut the line — every time
Walk the stack, queues, then the log
7 minWalk the stack, queues, then the log
async/await is promises in a costume
7 minasync/await is promises in a costume
Chained .then() reshuffles microtask order
7 minChained .then() reshuffles microtask order
Earn the trace: predict before you run
8 minEarn the trace: predict before you run
Phase 3Browser vs Node in Practice
Compare browser and Node loops in real scenarios
The click handler that froze the UI
7 minThe click handler that froze the UI
Node's loop has phases, not just queues
8 minNode's loop has phases, not just queues
When the same code logs different orders
8 minWhen the same code logs different orders
The microtask loop that ate the UI
7 minThe microtask loop that ate the UI
Phase 4Instrument Your Own Loop
Instrument a program to log each loop phase
Instrument a tiny program to log event loop phases
15 minInstrument a tiny program to log event loop phases
Frequently asked questions
- What is the JavaScript event loop in simple terms?
- This is covered in the “The JavaScript Event Loop” learning path. Start with daily 5-minute micro-lessons that build from fundamentals to hands-on application.
- What's the difference between the microtask queue and the task queue?
- This is covered in the “The JavaScript Event Loop” learning path. Start with daily 5-minute micro-lessons that build from fundamentals to hands-on application.
- Why does a Promise callback run before a setTimeout with zero delay?
- This is covered in the “The JavaScript Event Loop” learning path. Start with daily 5-minute micro-lessons that build from fundamentals to hands-on application.
- How is the Node.js event loop different from the browser's?
- This is covered in the “The JavaScript Event Loop” learning path. Start with daily 5-minute micro-lessons that build from fundamentals to hands-on application.
- What blocks the event loop, and how do I detect it?
- This is covered in the “The JavaScript Event Loop” learning path. Start with daily 5-minute micro-lessons that build from fundamentals to hands-on application.
Related paths
🐳Docker Containers Basics
Build the mental model first, then the commands — from containers vs VMs through images, layers, volumes, and networking to composing a multi-service app.
🧪Property-Based Testing
Go beyond example-based tests — learn to express what your code should always do, then let a framework find the inputs that break it.
🦀Rust's Ownership Model
Build a working mental model of Rust's ownership system — from stack vs heap intuition through borrow checker mastery — so you can read and write Rust without fighting the compiler.
💻Elixir Pattern Matching
Stop reading `=` as assignment and start using it as Elixir's core flow-control tool — through function heads, guards, and `with` — until you can rewrite a tiny command parser without a single `if`.