Promissa saysCallbacks were the original async pattern — pass a function to run when work finishes.
JS is single-threaded, so slow work (timers, network) takes a callback to run on completion: setTimeout(done, 1000). The page stays responsive while waiting. Callbacks work but compose poorly — chaining several leads to deep nesting (next lesson). Promises and async/await largely replaced them for sequencing.
Power-ups you unlock
Callback = function to run when work completes
Keeps the single thread responsive
The original async building block
Composes poorly when chained
Race Condition Rex attacks — common mistakes
Assuming callback code runs synchronously inline
Error handling scattered across callbacks
Deep nesting when sequencing several callbacks
Boss battleRun a callback after a 500ms timeout and log before/after to see the order.
Example code
<!doctype html><html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;font-family:monospace;padding:20px"><pre id="o"></pre>
<script>const o=document.getElementById('o');o.textContent='before\n';setTimeout(()=>{o.textContent+='callback ran (async)\n';},500);o.textContent+='after\n';</script></body></html>