Передача функций как параметров в JavaScript без eval()

Быстрый ответ

В JavaScript функция может быть передана в качестве аргумента другой функции. Продемонстрируем это на примере:

function greet(name) {
  console.log(`Привет, ${name}!`);
}

function runCallback(cb) {
  cb('Алиса');
}

runCallback(greet); // Выводит на печать: Привет, Алиса!

Функция runCallback получает функцию greet в качестве коллбэка и выполняет её с аргументом 'Алиса'. Чистый JavaScript!

Особенности работы с функциями в JavaScript

Передача по ссылке, а не значением!

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

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

function runWithValues(fn, val1, val2) {
  return fn(val1, val2);
}

console.log(runWithValues(add, 5, 3)); // Выводит на печать: 8

Подробнее об этом расскажет наш спикер на видео

Безопасный вызов функций

Вызов простой функции может привестии к TypeError. Однако, такую ошибку можно легко предотвратить, проверив тип аргумента:

function safeInvoke(callback) {
  if (typeof callback === 'function') {
    callback();
  }
}

safeInvoke(greet); // Работает правильно, вот вам печенька 🍪!

Сохранение контекста

Для сохранения контекста при передаче функции с аргументами используются методы привязки, например, .bind():

function notify() {
  console.log('Отправлено уведомление!');
}

function delayAndRun(task) {
  setTimeout(task, 1000);
}

delayAndRun(notify.bind(this));

Визуализация

Можно представить передачу функции как параметра в JavaScript, как передачу контроля над вашим телевизором другу с помощью пульта:

Передача функций 🔄:

| Вы (Вызывающий) | -> | 🖥️ Функция (Пульт) | -> | Друг (Вызываемый) |

Каждая кнопка на пульте активирует определенную функцию:

[🔘 Кнопка А (functionA)]  [🔘 Кнопка B (functionB)]  ...

Друг может выполнить любую из них:

function invokeButton(remoteControlFunction) {
  remoteControlFunction(); // Активировать функцию пульта
}

Итак, выбирайте желаемый канал в удобное для вас время!

Советы и хитрости

Контролируемые коллбэки

Если требуется вызвать коллбэк с определенными параметрами, вам помогут методы .apply() или .call():

function greetUser(user) {
  console.log(`Добро пожаловать, ${user}!`);
}

function runCallbackWithUser(cb, user) {
  cb.apply(null, [user]);
}

runCallbackWithUser(greetUser, 'Боб'); // Выводит на печать: Добро пожаловать, Боб!

Защита области видимости

Анонимная функция может помочь защитить область видимости аргументов при вызове коллбэка:

function processData(data, cb) {
  // Обработка данных...
  cb(data);
}

processData({ id: 1 }, function(dataset) {
  console.log(`Обработка данных: ${JSON.stringify(dataset)}`);
});

Асинхронное использование функций

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

fetch('/api/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  });

Избегание ошибок

Чтобы не столкнуться с null или undefined, убедитесь, что вызываемая функция определена, вы можете также задать функцию по умолчанию:

function invokeIfFunction(callback = () => {}) {
  if (typeof callback === 'function') {
    callback();
  }
}

invokeIfFunction(); // Ничего не выполняет.

Полезные материалы

1. Функции – JavaScript | MDN — всестороннее изучение функций JavaScript.
2. Подробно объясним что такое Callback в JavaScript | Brandon Morelli | codeburst — доступное объяснение концепции коллбэков.
3. Объект функции, NFE | JavaScript.info — детальное описание функциональных объектов и именованных функциональных выражений.
4. JavaScript Eloquent-er with Higher-Order Functions — подробное руководство по функциям высшего порядка.
5. Функции высшего порядка и массивы в JavaScript – YouTube — наглядное учебное видео о функциях высшего порядка.
6. Вызов функций в JavaScript и использование this | Yehuda Katz — анализ функционирования ключевого слова this.