See how JavaScript actually runs.
Predict the console output, then trace callbacks, scopes and bindings step by step — Call Stack, queues, and the environments your closures capture.
13 cases · 17 experiments · outputs verified on every commit
The series
Thirteen snippets developers get wrong — each one naming the exact misconception when you do.
Foundations
One thread, one stack, and why a 0ms timer still waits.
How the Event Loop Runs
setTimeout(fn, 0)
Your first look inside the JavaScript runtime: watch synchronous code claim the Call Stack while a "0ms" timer waits its turn in the Task Queue.
How Timers Really Run
setTimeout is a minimum, not a promise
The timer expires at exactly 100ms. The callback runs at 300ms. Nothing is broken — this is how setTimeout has always worked, and why animations built on it stutter.
Async JavaScript
Microtasks, chains, await, and the network.
How Promises Run
Promise vs setTimeout
The classic interview question. setTimeout is registered BEFORE the promise — so why does the promise callback run first? Watch the two queues to find out.
How Promise Chains Run
Two chains, interleaved
Two promise chains, written one after the other. They do not run one after the other — they interleave, step for step. The reason is a single rule about when a chained .then() is queued.
How await Runs
async / await
async/await is syntactic sugar over promises. See the exact moment main() suspends, where its continuation waits, and why the global script keeps running.
How Rejections Run
throw · catch · finally
Nine cases in, everything so far has succeeded. This one throws. Where does the error go, when does catch actually run — and what happens if nobody catches at all?
How Promise.all Runs
fail-fast, but nothing gets cancelled
Promise.all rejects the moment one input rejects. So what happens to the other promises — do they stop? Watch the slow timer to find out.
How fetch Runs
await over the network
A request takes 200ms and JavaScript is single-threaded. So what is the thread doing meanwhile, why are there TWO awaits, and why does a 404 sail straight past your catch block?
Advanced Runtime
Everything at once, plus rendering and Node.
How It All Runs Together
The full interview question
The boss level. Every mechanism from the earlier cases appears at once, in the exact shape interviewers like to write it. Six numbers, one correct order.
How Rendering Fits In
requestAnimationFrame vs microtasks
Everything so far ignored the one job the browser cares about most: putting pixels on screen. Rendering is a step in the loop, and microtasks always go first.
How Node Runs It
process.nextTick vs Promise
Everything from the browser cases still holds in Node, plus one extra queue that outranks promises. But whether you actually observe it depends on whether the file is CommonJS or ESM.
Language Execution
Scopes, closures, and the TDZ — how variables actually resolve.
How the TDZ Works
hoisting: var vs let
"Hoisting" gets blamed for a lot. Watch what the engine actually does before your first line runs — and where the temporal dead zone begins and ends.
How Closures Capture Variables
var vs let in a loop
The interview classic that is actually a scoping question. Six timers, two loops, one keyword changed — and the outputs disagree. The Scopes panel shows exactly why.
Every output here is executed, not asserted.
A script runs each snippet for real on every commit and checks the result against the animation and the answer key. If they disagree, the build fails.