LearnJS

Callback-функции в JavaScript

Callback-функция - это функция, которую передают в другую функцию как аргумент.

function sayHello() {
  console.log('Привет!');
}

function runCallback(callback) {
  callback();
}

runCallback(sayHello);

Результат:

Привет!

Функция sayHello была передана в runCallback(). Внутри runCallback() она вызвалась через параметр callback.

Что такое callback-функция

Слово callback обычно переводят как «обратный вызов».

Идея простая: мы передаем функцию, а другой код решает, когда ее вызвать.

function finishLesson() {
  console.log('Урок завершен');
}

function startLesson(callback) {
  console.log('Урок начался');

  callback();
}

startLesson(finishLesson);

Результат:

Урок начался
Урок завершен

Здесь finishLesson - callback-функция. Она передана в startLesson() и вызвана внутри нее.

Функция как значение

В JavaScript функцию можно записать в переменную, передать в другую функцию или вернуть из функции.

let showMessage = function () {
  console.log('Сообщение');
};

showMessage();

Если функцию можно хранить в переменной, значит ее можно передать как обычное значение.

function showMessage() {
  console.log('Сообщение');
}

function run(action) {
  action();
}

run(showMessage);

Параметр action получил функцию showMessage, а потом вызвал ее.

Простой пример callback

Callback удобно использовать, когда одно действие должно быть настраиваемым.

function calculate(a, b, operation) {
  return operation(a, b);
}

function sum(a, b) {
  return a + b;
}

function multiply(a, b) {
  return a * b;
}

console.log(calculate(4, 5, sum));
console.log(calculate(4, 5, multiply));

Результат:

9
20

Функция calculate() не знает заранее, что именно нужно сделать с числами. Это решает callback-функция.

Передача функции без круглых скобок

Когда мы передаем callback, чаще всего пишем имя функции без круглых скобок.

runCallback(sayHello);

Так мы передаем саму функцию.

Если поставить круглые скобки, функция вызовется сразу.

runCallback(sayHello());

В этом случае в runCallback() попадет не функция, а результат вызова sayHello(). Если функция ничего не возвращает, этим результатом будет undefined.

Callback с аргументами

Callback-функция может принимать аргументы. Их передает та функция, внутри которой callback вызывается.

function repeat(count, callback) {
  for (let i = 1; i <= count; i++) {
    callback(i);
  }
}

function showNumber(number) {
  console.log(number);
}

repeat(3, showNumber);

Результат:

1
2
3

Функция repeat() сама вызывает callback и передает в него текущее число.

Callback в setTimeout()

Callback часто встречается в готовых функциях JavaScript. Например, в setTimeout().

function showMessage() {
  console.log('Прошла секунда');
}

setTimeout(showMessage, 1000);

Функция showMessage передается в setTimeout() и будет вызвана позже.

Callback не обязательно связан с задержкой или асинхронным кодом, но именно там он часто встречается.

Callback в методах массивов

Многие методы массивов тоже принимают callback. Например, forEach().

let languages = ['HTML', 'CSS', 'JavaScript'];

languages.forEach(function (language) {
  console.log(language);
});

Результат:

HTML
CSS
JavaScript

Метод forEach() сам проходит по массиву и вызывает callback для каждого элемента.

То же самое можно записать стрелочной функцией.

languages.forEach((language) => {
  console.log(language);
});

Итого

1. Callback-функция - это функция, переданная в другую функцию как аргумент.

2. Обычно callback передают без круглых скобок, чтобы передать саму функцию, а не результат ее вызова.

3. Функция, которая принимает callback, сама решает, когда его вызвать.

4. Callback может принимать аргументы.

5. Callback-функции часто встречаются в setTimeout(), обработчиках событий и методах массивов.