Что такое callback-функции?

JuniorJavaScript #javascript #async #callbacks

Вопрос

Что такое callback-функция и где она используется?

Короткий ответ

Callback — это функция, переданная в другую функцию как аргумент, которая будет вызвана позже: сразу, после завершения асинхронной операции или в ответ на событие.

Подробный ответ

Callback-и — базовый строительный блок асинхронного JavaScript до появления промисов. Типичные сценарии:

  1. Асинхронные операции — функция вызывается, когда данные готовы (ответ сервера, чтение файла).
  2. Обработка событий — функция вызывается браузером при клике, вводе и т.д.
  3. Таймеры — setTimeout/setInterval вызывают callback через заданное время.

Главная проблема callback-подхода — callback hell: при цепочке из нескольких последовательных асинхронных шагов код уходит вправо вложенными друг в друга функциями, что затрудняет чтение и обработку ошибок. Именно это стало причиной появления Promise, а затем async/await.

Пример

// Асинхронная операция с callback
function fetchData(url, callback) {
  fetch(url)
    .then(response => response.json())
    .then(data => callback(null, data))
    .catch(error => callback(error))
}

fetchData('/api/posts', (error, data) => {
  if (error) return console.error(error)
  console.log(data)
})

// Обработка событий
button.addEventListener('click', () => {
  console.log('Button clicked')
})

// Таймер
setTimeout(() => {
  console.log('Прошло 2 секунды')
}, 2000)

// Callback hell: несколько последовательных шагов
getUser(id, (user) => {
  getOrders(user.id, (orders) => {
    getOrderDetails(orders[0].id, (details) => {
      console.log(details) // вложенность растёт с каждым шагом
    })
  })
})

Дополнительные вопросы

  • Что такое "callback hell" и как от него избавиться?
  • Чем callback отличается от Promise по способу обработки ошибок?
  • Что такое error-first callback (конвенция Node.js)?

Связанные вопросы