Day 22 of 100: Callbacks — The Pattern Under Everything Async

Day 22 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.

---

Before promises, callbacks. They still appear in event handlers and Playwright routes. Understand the pattern and its limits.

Functions as Arguments

function withRetry(action, onFail) {
  const ok = action();
  if (!ok) onFail('action returned false');
}

withRetry(
  () => Math.random() > 0.5,
  (reason) => console.log('failed: ' + reason)
);

Where Playwright Uses Callbacks

// Event listeners
// page.on('console', msg => console.log(msg.text()));
// page.on('dialog', dialog => dialog.accept());

// Route handlers
// page.route('**/api/**', route => route.fulfill({ status: 200 }));

const events = [];
const listener = (e) => events.push(e);
listener('page-loaded');
listener('api-called');
console.log(events); // ['page-loaded', 'api-called']

Callback Hell — Why Promises Exist

// The pyramid of doom (legacy style):
// login(user, () => {
//   loadDashboard(() => {
//     fetchOrders(() => {
//       assertOrders(() => { /* 4 levels deep */ });
//     });
//   });
// });
// Tomorrow: promises flatten this. Day 24: async/await makes it readable.

Tomorrow (Day 23): Promises — the contract behind every await.