Функции высшего порядка и колбэки

Фундамент функционального стиля, на котором держатся map, filter и reduce.

Функция высшего порядка — функция, которая принимает другую функцию как аргумент и/или возвращает функцию.

Функция как аргумент

Передавая функцию внутрь другой, мы выносим «что делать» наружу. Это и есть колбэк — функция, которую вызовут позже.

function repeat(n, action) {
  for (let i = 0; i < n; i++) {
    action(i); // вызываем переданную функцию
  }
}

repeat(3, (i) => console.log("шаг", i));

Вывод:

шаг 0
шаг 1
шаг 2

Функция, возвращающая функцию

Так создают «фабрики» функций — настраиваемые под параметр. Внутри работает замыкание.

function greaterThan(n) {
  return (m) => m > n; // запоминает n
}

const greaterThan10 = greaterThan(10);
console.log(greaterThan10(15));
console.log(greaterThan10(5));

Вывод:

true
false

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

Функции высшего порядка позволяют не дублировать логику, а параметризовать поведение. Один filter подходит под любое условие — нужно лишь передать функцию-предикат.

function filterArray(arr, predicate) {
  const result = [];
  for (const item of arr) {
    if (predicate(item)) result.push(item);
  }
  return result;
}

const nums = [1, 2, 3, 4, 5, 6];
console.log(filterArray(nums, (x) => x % 2 === 0));
console.log(filterArray(nums, (x) => x > 3));

Вывод:

[ 2, 4, 6 ]
[ 4, 5, 6 ]

Функция-обёртка (декоратор)

Можно обернуть функцию, добавив поведение. Здесь обёртка логирует вызовы исходной.

function withLog(fn) {
  return (...args) => {
    console.log("вызов с:", args);
    return fn(...args);
  };
}

const add = (a, b) => a + b;
const loggedAdd = withLog(add);
console.log("результат:", loggedAdd(2, 3));

Вывод:

вызов с: [ 2, 3 ]
результат: 5

Почему это важно для собеседования

Функции высшего порядка — фундамент, на котором держится почти весь современный JavaScript: методы массивов (map, filter, reduce), обработчики событий, middleware, React-хуки, промисы (.then принимает функцию). Если вас просят объяснить термин, удобно показать обе грани: «принимает функцию» (как map) и «возвращает функцию» (как фабрика или bind). А ключевая причина, по которой это вообще работает, — функции в JavaScript являются значениями первого класса: их можно хранить в переменных, передавать в аргументы и возвращать, как любое число или строку. Именно это свойство языка и делает возможными колбэки, замыкания и функциональный стиль.

Итог

Функция высшего порядка принимает и/или возвращает функцию.
Колбэк — переданная функция, которую вызывают позже.
На этом приёме построены map/filter/reduce и декораторы-обёртки.