Що таке callback-функція?

JavaScriptJunior~1 хв читання

Callback-функція - це функція, передана як аргумент іншій функції, щоб виконатися пізніше, після того як станеться якась подія або завершиться операція.

Простіше кажучи:

"Я передаю тобі функцію - виклич її, коли будеш готовий."

Найпростіший приклад

javascript

function sayHello(name) {
  console.log(`Привіт, ${name}!`);
}

function greet(callback) {
  console.log('Готуюся привітатися...');
  callback('Тім');
}

greet(sayHello);

Що відбувається:

sayHello - це callback, переданий у greet;
greet викликає його всередині себе;
У консоль виводиться:

javascript

Готуюся привітатися...
Привіт, Тім!

Callback в анонімній формі

Не обов'язково передавати іменовану функцію - можна передати анонімну:

javascript

setTimeout(() => {
  console.log('Минуло 2 секунди');
}, 2000);

Тут:

() => console.log(...) - callback-функція,
Вона буде викликана через 2 секунди - не одразу.

Як це працює

JavaScript приймає callback як значення (адже функції - "об'єкти першого класу");
Він не викликає її одразу, а зберігає для подальшого виклику;
Коли настає потрібний момент (таймер спрацював, запит завершився, подія сталася) - рушій викликає цю функцію.

Приклади в реальних ситуаціях

1. Колбек в обробнику подій

javascript

button.addEventListener('click', () => {
  console.log('Кнопку натиснуто!');
});

Тут callback викликається браузером при кліку.

2. Колбек при завантаженні даних

javascript

fetch('/user')
  .then(response => response.json())
  .then(data => console.log(data));

Колбеки .then() викликаються після завершення асинхронного запиту.

3. Колбек як крок в алгоритмі

javascript

function calculate(a, b, callback) {
  const result = a + b;
  callback(result);
}

calculate(2, 3, (sum) => {
  console.log('Результат:', sum);
});

Проблема: "Callback Hell"

Якщо колбеків забагато, код стає вкладеним і нечитабельним:

javascript

getUser(id, user => {
  getPosts(user, posts => {
    getComments(posts, comments => {
      console.log('Готово!');
    });
  });
});

Це називають callback hell - "пекло з колбеків".

Рішення проблеми

Щоб уникнути "пекельних вкладень", з'явилися:

Проміси (Promise):

javascript
getUser(id) .then(getPosts) .then(getComments) .then(console.log);
async/await:

javascript
const user = await getUser(id); const posts = await getPosts(user); const comments = await getComments(posts); console.log('Готово!');

Проста аналогія

Уяви, ти замовляєш піцу. Ти кажеш: "Коли приготуєте - зателефонуйте мені."

Цей "дзвінок" - і є callback.

ПІДСУМОК

Термін	Опис
Callback-функція	Функція, передана в іншу функцію для виконання пізніше
Коли викликається	Після події, завершення операції або за умовою
Приклади використання	`setTimeout`, `addEventListener`, `fetch().then()`
Проблема	Глибока вкладеність ("callback hell")
Сучасні альтернативи	`Promise`, `async/await`

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.