> Что такое функция обратного вызова (callback) и когда она вызывается в JavaScript (JavaScript)

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

Callback - это функция, которая передаётся в другую функцию в качестве аргумента и вызывается внутри неё после завершения определённого действия. В JavaScript callback’и используются для обработки асинхронных операций (например, таймеры, запросы к серверу, чтение файлов) или для реализации паттерна "посетитель" в синхронном коде (например, Array.forEach). Вызов callback’а происходит в момент, когда внешняя функция решает, что условие выполнено или операция завершена.

Подробное объяснение

Callback’и - фундаментальная концепция JavaScript, основанная на том, что функции являются объектами первого класса (их можно передавать как значения). Существует два основных сценария:

1. Синхронные callback’и - вызываются немедленно внутри внешней функции. Пример: arr.map(callback) - callback выполняется для каждого элемента массива синхронно, до завершения map.

2. Асинхронные callback’и - вызываются позже, после завершения асинхронной операции. Пример: setTimeout(callback, 1000) - callback выполняется через 1 секунду, после того как таймер сработает. В этом случае callback попадает в очередь задач (task queue) и выполняется после того, как стек вызовов освободится.

Важно понимать, что асинхронный callback не вызывается сразу после передачи - он "регистрируется" и будет вызван event loop’ом в будущем, когда наступит соответствующее событие (таймер, ответ сервера, клик пользователя).

На практике

Callback’и широко используются в:

• Обработчиках событий DOM: element.addEventListener('click', callback)
• Таймерах: setTimeout, setInterval
• Работе с API: fetch(url).then(callback) (хотя здесь уже Promise, но концептуально то же)
• Функциях высшего порядка: filter, reduce, sort
• Middleware в Express.js

Проблема, известная как "callback hell" (ад колбэков), возникает при вложенности асинхронных callback’ов друг в друга. Современные альтернативы - Promise и async/await.

Пример кода

JAVASCRIPT
// Синхронный callback
function greet(name, callback) {
  const message = `Привет, ${name}!`;
  callback(message);
}

greet('Анна', console.log); // Выведет: Привет, Анна!

// Асинхронный callback
function fetchUserData(userId, callback) {
  setTimeout(() => {
    const user = { id: userId, name: 'Иван' };
    callback(user);
  }, 1000);
}

fetchUserData(1, (user) => {
  console.log('Получен пользователь:', user.name);
});
console.log('Запрос отправлен'); // Выполнится до callback'а

Как отвечать на собеседовании

Начни с простого определения: callback - это функция, переданная в другую функцию для последующего вызова. Затем раздели на синхронные и асинхронные случаи. Объясни, что в асинхронном случае callback вызывается event loop’ом после завершения операции. Упомяни, что callback’и - основа асинхронности в JS, но у них есть недостаток - callback hell. Если спросят про this в callback’е, скажи, что контекст теряется, и нужно использовать bind, стрелочную функцию или сохранять ссылку.

Что проверяет интервьюер

• Понимание того, что функции в JS - объекты первого класса
• Различие между синхронным и асинхронным выполнением
• Знание event loop и очереди задач (хотя бы базовое)
• Осознание проблем callback hell и путей их решения
• Умение объяснить на примере, когда именно вызывается callback

Типичные ошибки

• Утверждение, что callback вызывается сразу после передачи (неверно для асинхронных)
• Путаница между callback и обычным вызовом функции с результатом
• Игнорирование потери контекста this в callback’е
• Непонимание разницы между синхронными и асинхронными callback’ами
• Сведение ответа только к обработчикам событий, без упоминания других сценариев