Передача функции в функцию в JavaScript

• Что значит передать функцию
• Простой пример
• Параметр для функции
• Почему без скобок
• Анонимная функция как аргумент
• Стрелочная функция как аргумент
• Аргументы для переданной функции
• Зачем это нужно
• Итого

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

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

function run(action) {
  action();
}

run(sayHello);

Результат:

Привет!

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

Что значит передать функцию

Когда мы передаем строку, число или объект в функцию, они попадают в параметр.

function showText(text) {
  console.log(text);
}

showText('Урок начался');

С функцией происходит то же самое.

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

function run(callback) {
  callback();
}

run(showMessage);

В параметр callback попала функция showMessage.

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

Представим, что у нас есть функция, которая выполняет действие после проверки.

function checkAccess(action) {
  let isAllowed = true;

  if (isAllowed) {
    action();
  }
}

function openPage() {
  console.log('Страница открыта');
}

checkAccess(openPage);

Результат:

Страница открыта

Функция checkAccess() не знает заранее, какое действие нужно выполнить. Это действие передается снаружи.

Параметр для функции

Параметр, в который попадает функция, можно назвать как угодно.

function runTask(task) {
  task();
}

function saveData() {
  console.log('Данные сохранены');
}

runTask(saveData);

Результат:

Данные сохранены

Название task не делает параметр особенным. Просто внутри него лежит функция.

Почему без скобок

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

runTask(saveData);

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

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

runTask(saveData());

В этом случае в runTask() попадет не функция, а результат вызова saveData().

Анонимная функция как аргумент

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

function runTask(task) {
  task();
}

runTask(function () {
  console.log('Задача выполнена');
});

Результат:

Задача выполнена

Так удобно писать небольшие действия, которые не нужны в других местах программы.

Стрелочная функция как аргумент

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

function runTask(task) {
  task();
}

runTask(() => {
  console.log('Готово');
});

Результат:

Готово

Стрелочные функции часто используют как короткие callback-функции.

Аргументы для переданной функции

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

function greetUser(name, callback) {
  callback(name);
}

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

greetUser('Анна', sayHello);

Результат:

Привет, Анна!

Функция greetUser() получила имя и функцию. Затем она вызвала переданную функцию и передала ей name.

Зачем это нужно

Передача функции в функцию нужна, когда часть поведения должна приходить снаружи.

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(2, 3, sum));
console.log(calculate(2, 3, multiply));

Результат:

5
6

Функция calculate() одна, но поведение разное. Оно зависит от функции, которую передали третьим аргументом.

Итого

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

2. Параметр может хранить функцию так же, как строку, число или объект.

3. Переданную функцию можно вызвать внутри другой функции.

4. При передаче функции обычно пишут имя без скобок.

5. Если функция принимает другую функцию, ее поведение становится гибче.