Что такое callback и как он используется?

👨‍💻 Frontend Developer 🟡 Часто попадается 🎚️ Легкий
#JavaScript #Функции #База JS

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

Callback — это функция, которая передаётся в качестве аргумента другой функции и вызывается внутри неё в определённый момент. Callback позволяет одной функции “вызывать” другую функцию, когда завершится какая-то операция.

// Обычная функция
function greet(name) {
  console.log('Привет, ' + name);
}
 
// Функция, принимающая callback
function processUser(name, callback) {
  // Делаем что-то с именем
  const processedName = name.toUpperCase();
  // Вызываем callback
  callback(processedName);
}
 
// Использование
processUser('иван', greet); // 'Привет, ИВАН'

Полный ответ

Callback — это как когда вы просите кого-то передать сообщение другому человеку. Вы даёте своему другу записку (функцию) и говорите: “Когда встретишь Петю, передай ему это!”. Callback — это и есть эта записка! 📝

Что такое callback

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

Простые примеры

Базовый пример callback

// Callback функция
function showMessage(message) {
  console.log('Сообщение: ' + message);
}
 
// Функция, использующая callback
function doSomething(action, callback) {
  console.log('Делаю ' + action);
  callback('Готово!');
}
 
// Использование
doSomething('работу', showMessage);
// 'Делаю работу'
// 'Сообщение: Готово!'

Callback с параметрами

function calculate(a, b, operation, callback) {
  const result = operation(a, b);
  callback(result);
}
 
function showResult(result) {
  console.log('Результат: ' + result);
}
 
// Использование
calculate(5, 3, (x, y) => x + y, showResult); // 'Результат: 8'
calculate(5, 3, (x, y) => x * y, showResult); // 'Результат: 15'

Как используются callbacks

В асинхронных операциях

// Имитация загрузки данных
function loadData(callback) {
  console.log('Начинаю загрузку...');
  
  // Имитация задержки
  setTimeout(() => {
    const data = 'Данные загружены';
    callback(data);
  }, 1000);
}
 
// Использование
loadData(function(result) {
  console.log('Успех: ' + result);
});

В обработчиках событий

// Имитация обработчика клика
function onClick(callback) {
  console.log('Жду клика...');
  // Когда происходит клик
  callback('Клик совершен!');
}
 
// Использование
onClick(function(message) {
  console.log('Событие: ' + message);
});

Когда использовать callbacks

Для обработки результатов

function validateEmail(email, successCallback, errorCallback) {
  if (email.includes('@')) {
    successCallback('Email корректный');
  } else {
    errorCallback('Email некорректный');
  }
}
 
validateEmail(
  'test@example.com',
  (msg) => console.log('Успех: ' + msg),
  (msg) => console.log('Ошибка: ' + msg)
);

Для гибкости кода

function processArray(arr, callback) {
  const result = [];
  for (let item of arr) {
    result.push(callback(item));
  }
  return result;
}
 
const numbers = [1, 2, 3];
const doubled = processArray(numbers, x => x * 2);
console.log(doubled); // [2, 4, 6]

Частые ошибки

Передача результата вместо функции

function doWork(callback) {
  const result = 'работа выполнена';
  // ❌ Ошибка — вызываем функцию вместо передачи
  // callback(result); // если callback не функция, будет ошибка
  
  // ✅ Правильно — проверяем, что callback — функция
  if (typeof callback === 'function') {
    callback(result);
  }
}

Забыть вызвать callback

function asyncOperation(callback) {
  // ❌ Ошибка — забыли вызвать callback
  // return 'результат';
  
  // ✅ Правильно — вызываем callback
  callback('результат');
}

Простые правила

  1. Callback — функция, передаваемая как аргумент другой функции 📨
  2. Вызов — callback вызывается внутри принимающей функции 📞
  3. Асинхронность — часто используется для асинхронных операций ⏱️
  4. Гибкость — позволяет настраивать поведение функций 🔧
  5. Проверка — всегда проверяйте, что callback — это функция ✅

Callback — это простая, но мощная концепция, которая лежит в основе многих JavaScript-паттернов. Без них невозможно представить современный JavaScript! 💪


Хотите больше статей для подготовки к собеседованиям? Подписывайтесь на EasyAdvice, добавляйте сайт в закладки и совершенствуйтесь каждый день 💪