Как работает обратный вызов в javascript?

Question

Accepted Answer

Функция обратного вызова, или колбэк-функция, - это любая функция, которая передаётся в другую функцию в качестве аргумента.

Рассмотрим пример. Создадим функцию, которая принимает на вход обращение и имя и выводит в консоль приветствие:

const callback = (greeting, name) => {
  console.log(`${greeting}, ${name}!`);
};

Теперь объявим вторую функцию, которая принимает на вход функцию (колбэк) и имя. Передав колбэк в другую функцию, мы можем внутри этой функции вызывать колбэк, передавать в него аргументы, возвращать, то есть совершать нужные нам действия:

const sayGreeting = (cb, name) => {
  cb('Hello', name);
};

Вызовем функцию sayGreeting(), передав в нее колбэк и какое-нибудь имя:

sayGreeting(callback, 'John'); // => Hello, John!

С использованием функций обратного вызова работают многие методы массивов, такие как map(), filter(), reduce(), find(), every() и другие. Продемонстрируем на примере метода map(), который принимает колбэк, вызывает его на каждом элементе массива и результат вызова записывает в новый массив. Например, у нас есть массив чисел:

const numbers = [0, 1, 2, 3, 4, 5];

Нам нужно каждое число умножить на 2. Объявим для этого функцию, которая принимает одно число и умножает его на 2:

const callback = (num) => num * 2;

Передадим функцию в качестве колбэка в метод map():

console.log(numbers.map((number) => callback(number))); // => [ 0, 2, 4, 6, 8, 10 ]

Или более короткий вариант записи:

console.log(numbers.map(callback)); // => [ 0, 2, 4, 6, 8, 10 ]

Часто колбэк определяется не снаружи, а внутри метода/функции:

console.log(numbers.map((num) => num * 2)); // => [ 0, 2, 4, 6, 8, 10 ]

Кроме того, функции обратного вызова используются внутри асинхронных методов. В этом случае их вызов происходит после завершения какой-то другой операции, например, после окончания времени таймера, после совершения пользователем определенного действия на странице, после получения данных с бэкенда и т.д.:

const callback = () => {
  console.log('Колбэк вызван после истечения времени таймера');
};

// Колбэк будет вызван через 1000 миллисекунд
setTimeout(callback, 1000); // => Колбэк вызван после истечения времени таймера

Как работает обратный вызов в javascript?

Похожие вопросы