Как работает обратный вызов в javascript?
Функция обратного вызова, или колбэк-функция, - это любая функция, которая передаётся в другую функцию в качестве аргумента.
Рассмотрим пример. Создадим функцию, которая принимает на вход обращение и имя и выводит в консоль приветствие:
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); // => Колбэк вызван после истечения времени таймера
