Передача функций и колбэки

В прошлом уроке мы увидели, что функция в JavaScript – обычное значение. А значит её можно не только хранить в переменной, но и передать другой функции.

Зачем? Чтобы передать ей не готовое значение, а действие, которое она сможет выполнить сама.

Функцию можно передать другой функции

До сих пор аргументами были числа и строки: double(5), greet('Ира'). Но иногда функции нужно передать не готовые данные, а действие, которое она должна выполнить. Поскольку функция в JavaScript – тоже значение, её можно передать аргументом:

run-twice.jsjs

1function runTwice(action) {2  action();3  action();4}56function sayHi() {7  console.log('Привет!');8}910runTwice(sayHi);

Консоль

Привет!

В runTwice(sayHi) мы не вызываем sayHi. Мы передаём саму функцию. Внутри runTwice она оказывается в параметре action, и уже runTwice решает, когда её вызвать – в нашем случае два раза.

Если хотим передать саму функцию, пишем её имя без скобок: sayHi – функция, sayHi() – результат её вызова.

Запись runTwice(sayHi()) делает другое: сначала вызовется sayHi(), а в runTwice уйдёт результат этого вызова.

Передаём функцию

runTwice(sayHi);

Передаём результат вызова

runTwice(sayHi());

Пока мы создали sayHi отдельно, дали ей имя, а затем передали в runTwice. Это удобно, если функция понадобится ещё где-нибудь.

Но что, если это действие нужно только здесь?

Функцию можно создать прямо в аргументе

Объявлять её отдельно необязательно: Function Expression можно написать прямо там, где требуется значение:

inline.jsjs

1function runTwice(action) {2  action();3  action();4}56runTwice(function () {7  console.log('Привет!');8});

Консоль

Привет!

Здесь мы создали функцию и сразу передали её в runTwice – отдельного имени ей не понадобилось.

Колбэк

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

callback.jsjs

1function runTwice(action) {2  action();3  action();4}56const sayHi = function () {7  console.log('Привет!');8};910runTwice(sayHi);  // колбэк – sayHi11// колбэк – функция, созданная на месте12runTwice(function () {13  console.log('Пока!');14});

Консоль

Привет!

Пока!

В обоих вызовах переданная функция – колбэк, а runTwice – функция, которая его получает и решает, когда вызвать. Здесь оба колбэка – Function Expression: sayHi сохранена в переменной, вторая создана прямо в аргументе.

Точно так же колбэком может быть и Function Declaration:

named-callback.jsjs

1function sayBye() {2  console.log('До встречи!');3}45runTwice(sayBye);

Консоль

До встречи!

Важно: колбэк не обязательно запускается «когда-нибудь позже». Он может быть вызван сразу, как здесь, или позже – например, после клика пользователя или завершения таймера.

Функция управляет «когда», колбэк – «что делать»

repeat.jsjs

1function repeat(n, action) {2  for (let i = 1; i <= n; i++) {3    action(i);4  }5}67const showStep = function (i) {8  console.log(`Шаг ${i}`);9};1011repeat(3, showStep);

Консоль

Шаг 1

Шаг 2

Шаг 3

Обратите внимание: repeat не просто вызывает action, а передаёт ему текущее значение i. Поэтому колбэк получает данные от функции, которая им управляет.

repeat знает, когда и сколько раз выполнить действие: for (let i = 1; i <= n; i++). Но она не знает, что именно делать на каждом повторении – это действие ей передают отдельно. Поэтому одну и ту же repeat можно использовать с разными функциями:

show-square.jsjs

1const showSquare = function (i) {2  console.log(i * i);3};45repeat(3, showSquare);

Консоль

Один код управляет процессом, другой определяет действие. Как вызов уходит внутрь repeat и возвращается – по шагам:

Вызов функции через параметр

function repeat(n, action) {

for (let i = 1; i <= n; i++) {

action(i);

}

const showStep = function (i) {

Создали функцию и сохранили её в переменной showStep.

console.log(`Шаг ${i}`);

};

repeat(3, showStep);

Создали функцию и сохранили её в переменной showStep.

Вызываем repeat(3, showStep). showStep передана без () – параметр action получает саму функцию.

Начинается первый проход цикла: i = 1.

В action(i) передаётся текущее значение i – число 1. Поскольку в action хранится showStep, фактически вызывается showStep(1).

Вызывается showStep(1). Её параметр i получает 1, поэтому в консоли появляется «Шаг 1».

showStep закончила работу – выполнение вернулось в repeat: i++ увеличивает i до 2.

Проверка: 2 <= 3 верно – цикл продолжается.

Снова action(i) – теперь с 2: вызывается showStep(2).

Параметр i получает 2 – в консоли «Шаг 2».

showStep закончила работу, выполнение вернулось в repeat: i++ даёт 3.

Проверка: 3 <= 3 верно – третий проход.

action(3) – третий вызов: showStep(3).

Параметр i получает 3 – в консоли «Шаг 3».

showStep закончила работу: i++ даёт 4.

Проверка: 4 <= 3 ложно – цикл закончен.

repeat решила, когда вызывать и что передать, showStep – что делать с полученным числом.

// теперь вы знаете

Если нужно передать саму функцию, пишем её без (); со скобками функция сначала вызывается
Функцию можно создать прямо в аргументе, если отдельное имя ей не понадобится
Колбэк – функция, переданная другой функции, чтобы та могла её вызвать
Колбэком может быть и Function Declaration, и Function Expression
Принимающая функция может решать, когда вызвать колбэк, сколько раз его вызвать и какие аргументы ему передать

Проверьте себя

Что в этом вызове является колбэком?

function repeat(n, action) {
  for (let i = 1; i <= n; i++) {
    action(i);
  }
}
const showStep = function (i) {
  console.log(`Шаг ${i}`);
};
repeat(3, showStep);

showStep

repeat

3

console.log

Сколько раз будет вызвана sayHi?

function runIf(allowed, action) {
  if (allowed) {
    action();
  }
}
function sayHi() {
  console.log('Привет!');
}
runIf(false, sayHi);
runIf(true, sayHi);

0 раз

1 раз

2 раза

ошибка

В каких вызовах в параметр action попадёт функция?

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

Выбери все верные варианты

runTwice(sayHi);

runTwice(function () { console.log('Пока!'); });

runTwice(sayHi());

runTwice('sayHi');

В каком порядке появятся строки в консоли?

function run(action) {
  console.log('до');
  action();
  console.log('после');
}
run(function () {
  console.log('внутри');
});

до, внутри, после

внутри, до, после

до, после, внутри

до, после – колбэк не вызывается

Что напечатает программа?

function withName(action) {
  action('Ира');
}
withName(function (name) {
  console.log('Привет, ' + name);
});

Привет, Ира

Привет, name

Привет, undefined

ошибка – колбэку ничего не передали

Вызов через параметр

Допишите тело runTwice(action): функция вызывает переданное действие два раза. Объявление sayHi и вызов внизу готовы – не меняйте их.

function runTwice(action) {
  // вызовите action дважды
}

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

runTwice(sayHi);

1function runTwice(action) {2  action();3  action();4}56const sayHi = function () {7  console.log('Привет!');8};910runTwice(sayHi);11

В параметре action лежит функция sayHi, поэтому action() вызывает её. Два вызова – два «Привет!».

Передать, а не вызвать

Программа падает с ошибкой: в runTwice попала не функция, а результат её вызова. Исправьте последнюю строку, чтобы «Привет!» напечаталось два раза. Остальной код менять не нужно.

function runTwice(action) {
  action();
  action();
}

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

runTwice(sayHi());

1function runTwice(action) {2  action();3  action();4}56function sayHi() {7  console.log('Привет!');8}910runTwice(sayHi);11

runTwice(sayHi()) сначала вызывал sayHi – одно «Привет!» – и передавал undefined, на котором action() падал. Без скобок в action ложится сама функция, и runTwice вызывает её дважды.

Свой колбэк

Функция repeat уже написана. Вызовите её так, чтобы в консоли оказалось три строки: «эхо 1», «эхо 2», «эхо 3». Действие передайте функцией-выражением.

function repeat(n, action) {
  for (let i = 1; i <= n; i++) {
    action(i);
  }
}

// ваш вызов repeat с собственным действием

1function repeat(n, action) {2  for (let i = 1; i <= n; i++) {3    action(i);4  }5}67repeat(3, function (i) {8  console.log('эхо ' + i);9});10

repeat не знает, что печатать, – она только вызывает переданное действие на каждом круге и передаёт ему номер круга. Сколько раз вызвать – решает repeat, что делать – ваша функция.

Вызвать или нет

Допишите тело runIf(condition, action): функция вызывает action только если condition === true. Функции showMenu и showError и вызовы внизу готовы – не меняйте их.

function runIf(condition, action) {
  // вызовите action только если condition === true
}

function showMenu() {
  console.log('Меню открыто');
}

function showError() {
  console.log('Ошибка');
}

runIf(true, showMenu);
runIf(false, showError);

1function runIf(condition, action) {2  if (condition === true) {3    action();4  }5}67function showMenu() {8  console.log('Меню открыто');9}1011function showError() {12  console.log('Ошибка');13}1415runIf(true, showMenu);16runIf(false, showError);17

Колбэк передаёт действие, а принимающая функция управляет моментом его выполнения: при true runIf вызывает action, при false – нет, поэтому «Ошибка» не печатается.

Колбэк получает данные

Допишите тело countdown(from, action): функция вызывает action для каждого числа от from до 1 по убыванию, передавая это число аргументом. Вызов внизу готов – не меняйте его.

function countdown(from, action) {
  // вызовите action для каждого числа от from до 1
}

countdown(3, function (n) {
  console.log(n);
});

1function countdown(from, action) {2  for (let i = from; i >= 1; i--) {3    action(i);4  }5}67countdown(3, function (n) {8  console.log(n);9});10

countdown решает, сколько раз и с каким числом вызвать action: на каждом круге цикла текущее i уходит в параметр n колбэка. Сам колбэк только печатает то, что получил.

Одна функция – разные действия

Функции repeat и showStep уже написаны. Вызовите repeat дважды: сначала на 2 круга с готовой showStep, затем ещё на 2 круга с функцией, созданной прямо в аргументе, которая печатает i * 10. В консоли должно получиться: «Шаг 1», «Шаг 2», 10, 20.

function repeat(n, action) {
  for (let i = 1; i <= n; i++) {
    action(i);
  }
}

function showStep(i) {
  console.log(`Шаг ${i}`);
}

// 1) repeat на 2 круга с showStep

// 2) repeat на 2 круга с функцией-выражением, печатающей i * 10

1function repeat(n, action) {2  for (let i = 1; i <= n; i++) {3    action(i);4  }5}67function showStep(i) {8  console.log(`Шаг ${i}`);9}1011repeat(2, showStep);1213repeat(2, function (i) {14  console.log(i * 10);15});16

Одна и та же repeat получила два разных колбэка: Function Declaration по имени и Function Expression, созданную на месте. repeat решает, сколько раз и с каким i вызвать действие, а что делать – определяет переданная функция.

Предыдущий урокFunction Expression и функция как значение Следующий урок Стрелочные функции

← → переключают уроки · не работают при фокусе в полях ввода