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

Question

Кирилл Маркеев · Accepted Answer

Функция обратного вызова, или _колбэк-функция_, - это любая функция, которая передаётся в другую функцию в качестве аргумента. 

Рассмотрим пример. Создадим функцию, которая принимает на вход обращение и имя и выводит в консоль приветствие:
```javascript
const callback = (greeting, name) => {
  console.log(`${greeting}, ${name}!`);
};
```
Теперь объявим вторую функцию, которая принимает на вход функцию (колбэк) и имя. Передав колбэк в другую функцию, мы можем внутри этой функции вызывать колбэк, передавать в него аргументы, возвращать, то есть совершать нужные нам действия:
```javascript
const sayGreeting = (cb, name) => {
  cb('Hello', name);
};
```

Вызовем функцию `sayGreeting()`, передав в нее колбэк и какое-нибудь имя:
```javascript
sayGreeting(callback, 'John'); // => Hello, John!
```

С использованием функций обратного вызова работают многие методы массивов, такие как `map()`, `filter()`, `reduce()`, `find()`, `every()` и другие.
Продемонстрируем на примере метода `map()`, который принимает колбэк, вызывает его на каждом элементе массива и результат вызова записывает в новый массив.
Например, у нас есть массив чисел:
```javascript
const numbers = [0, 1, 2, 3, 4, 5];
```
Нам нужно каждое число умножить на 2. Объявим для этого функцию, которая принимает одно число и умножает его на 2:
```javascript
const callback = (num) => num * 2;
```
Передадим функцию в качестве колбэка в метод `map()`:
```javascript
console.log(numbers.map((number) => callback(number))); // => [ 0, 2, 4, 6, 8, 10 ]
```
Или более короткий вариант записи:
```javascript
console.log(numbers.map(callback)); // => [ 0, 2, 4, 6, 8, 10 ]
```
Часто колбэк определяется не снаружи, а внутри метода/функции:
```javascript
console.log(numbers.map((num) => num * 2)); // => [ 0, 2, 4, 6, 8, 10 ]
``` 

Кроме того, функции обратного вызова используются внутри асинхронных методов. В этом случае их вызов происходит после завершения какой-то другой операции, например, после окончания времени таймера, после совершения пользователем определенного действия на странице, после получения данных с бэкенда и т.д.:
```javascript
const callback = () => {
  console.log('Колбэк вызван после истечения времени таймера');
};

// Колбэк будет вызван через 1000 миллисекунд
setTimeout(callback, 1000); // => Колбэк вызван после истечения времени таймера
```

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

Ответы

Каталог