Day 26 of 100: The Event Loop — Why Async Works Without Threads

Day 26 of 100 — 100 Days of Playwright with TypeScript Challenge. Phase: JavaScript Fundamentals. JavaScript (Days 1-33) → TypeScript (Days 34-63) → Playwright (Days 64-96) → AI Framework Capstone (Days 97-100).

🎭 Want to master this with real projects? Join the Playwright Automation Mastery course at The Testing Academy.

---

JavaScript is single-threaded yet handles thousands of async operations. The event loop is how. Understanding it explains async test behavior.

The Mental Model

console.log('1: sync start');

setTimeout(() => console.log('3: macrotask (timer)'), 0);

Promise.resolve().then(() => console.log('2: microtask (promise)'));

console.log('1: sync end');

// Output order: sync → microtasks → macrotasks
// 1: sync start
// 1: sync end
// 2: microtask (promise)
// 3: macrotask (timer)

Why QA Cares

• await yields to the event loop — other work runs while waiting
• setTimeout(fn, 0) does NOT run immediately — it queues
• Heavy sync loops block everything — including Playwright’s internal timers
• Microtasks (promises) always beat macrotasks (timers) — explains ordering surprises in logs

Blocking Demo

// This freezes the loop for 2s — nothing else can run:
const start = Date.now();
while (Date.now() - start < 2000) {}
console.log('blocked everything for 2s');
// Never busy-wait in tests. Always await real conditions.

Tomorrow (Day 27): ES Modules — import and export.