Callback — це функція яку ти передаєш іншій функції, але сам не викликаєш. Той хто отримав твою функцію — вирішує коли її викликати.

Подивимось на конкретний приклад з Playwright:

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

Тут є дві функції: page.route() — це метод Playwright, він знає як слідкувати за мережевими запитами. І route => { ... } — це твоя функція. Ти її написав, але сам не викликаєш.

Ти даєш свою функцію Playwright і кажеш: “ось моя функція, ти знаєш коли її викликати — викликай коли буде запит”. Playwright тримає твою функцію у себе. Коли браузер робить запит на /api/ — Playwright сам викличе твою функцію і передасть в неї об’єкт route.

Тобто: ти — пишеш функцію і передаєш її. Playwright — вирішує коли її викликати і викликає.

Ще простіший приклад — setTimeout:

setTimeout(() => {
  console.log('привіт');
}, 3000);
// () => { console.log('привіт') } — це callback
// Ти передав її setTimeout
// setTimeout чекає 3 секунди і сам викликає твою функцію
// Ти не викликав її — він викликав

Callback зустрічається скрізь у Playwright:

// page.on() — Playwright викличе твій callback коли відбудеться подія
page.on('dialog', dialog => {
  dialog.accept(); // ← твій callback, Playwright викликає коли з'явиться діалог
});

// forEach — JavaScript викличе твій callback для кожного елемента
[1, 2, 3].forEach(num => {
  console.log(num); // ← твій callback, forEach викликає тричі
});

// test() — Playwright викличе твій callback коли запускає тест
test('назва тесту', async ({ page }) => {
  // ← це теж callback! Playwright викликає його коли запускає тест
});

💡 Як розпізнати callback в коді: бачиш що функція передається як аргумент (всередині дужок іншої функції) і ти її не викликаєш одразу — це callback. Стрілочна функція () => {} або async () => {} як аргумент — майже завжди callback.

Чому без () після callback — важливо:

const greet = () => console.log('привіт');

// З дужками () — викликаємо ЗАРАЗ і передаємо результат
setTimeout(greet(), 1000);
// greet() виконалась одразу при читанні цього рядка
// setTimeout отримав undefined — бо greet нічого не повертає

// Без дужок — передаємо саму функцію
setTimeout(greet, 1000);
// setTimeout тримає greet у себе і викличе через 1000мс

Аналогія: ти даєш другу завдання “зателефонуй мамі через годину”. greet — це номер телефону. Друг сам натисне дзвінок через годину. greet() — це ти сам набрав номер і дав другу вже активний дзвінок. Мама вже відповідає — до того як минула година.

Як знайти callback у складному коді — три кроки:

1. Знайди виклик функції — відкриваючу дужку (
2. Шукай всередині дужок => або ключове слово function
3. Все що після => до відповідної закриваючої ) — це callback і його тіло

🔧 TypeScript / JS патерни в цьому прикладі() => {} — стрілочна функція як callback (передається як аргумент, не викликається одразу); async () => {} — async стрілочна функція-callback; setTimeout(fn, ms) — вбудована функція яка приймає callback; forEach(callback) — метод масиву з callback; { page } — деструктуризація параметра callback.

🗣 Як читати в голос Callback— це функція яку ти передаєш іншій функції але сам не викликаєш. Той хто отримав твою функцію — вирішує коли її викликати. У Playwright це зустрічається скрізь: у page.route() другим аргументом іде стрілочна функція — це callback, Playwright викличе її кожного разу коли браузер зробить запит що відповідає паттерну. У page.on('dialog', ...) — Playwright викличе callback коли з’явиться діалог. У test('назва', async ({page}) => {}) — сама функція тесту це теж callback, Playwright викликає її коли запускає тест. Ключова ознака callback: функція передається як аргумент всередині дужок іншої функції і не викликається одразу через круглі дужки після неї. Найпростіший приклад поза Playwright: setTimeout(() => console.log('привіт'), 3000) — ти передав функцію setTimeout, і він сам викличе її через 3 секунди.