Что такое функция высшего порядка?

Функция высшего порядка (Higher-Order Function)

Функция высшего порядка (HOF) — это функция, которая принимает другую функцию в качестве аргумента или возвращает функцию как результат. Это ключевой концепт функционального программирования, который позволяет писать более гибкий и переиспользуемый код.

Определение

Функция высшего порядка — это функция, которая:

• Принимает функцию как параметр, или
• Возвращает функцию как результат, или
• Делает оба

Примеры 1: Функция принимает другую функцию

// Функция высшего порядка
function map(array: number[], callback: (x: number) => number): number[] {
  const result = [];
  for (let i = 0; i < array.length; i++) {
    result.push(callback(array[i]));
  }
  return result;
}

// Использование
const numbers = [1, 2, 3, 4, 5];
const doubled = map(numbers, (x) => x * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

Примеры 2: Функция возвращает другую функцию

// Функция высшего порядка
function multiply(factor: number): (x: number) => number {
  return (x: number) => x * factor;
}

// Использование
const double = multiply(2);
const triple = multiply(3);

console.log(double(5)); // 10
console.log(triple(5)); // 15

Это называется каррирование — преобразование функции с несколькими параметрами в цепочку функций с одним параметром.

Встроенные функции высшего порядка в JavaScript

Array.map() — преобразует каждый элемент:

const numbers = [1, 2, 3, 4];
const squared = numbers.map((x) => x * x);
console.log(squared); // [1, 4, 9, 16]

Array.filter() — отбирает элементы по условию:

const numbers = [1, 2, 3, 4, 5, 6];
const evens = numbers.filter((x) => x % 2 === 0);
console.log(evens); // [2, 4, 6]

Array.reduce() — агрегирует значения в одно:

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((accumulator, x) => accumulator + x, 0);
console.log(sum); // 10

Array.find() — находит первый элемент по условию:

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
];

const user = users.find((u) => u.id === 2);
console.log(user); // { id: 2, name: 'Bob' }

Array.forEach() — выполняет функцию для каждого элемента:

const numbers = [1, 2, 3];
numbers.forEach((x) => console.log(x * 2));
// Output: 2, 4, 6

Примеры 3: Композиция функций

Композиция — это соединение нескольких функций в одну:

// Вспомогательные функции
const add10 = (x: number) => x + 10;
const multiply2 = (x: number) => x * 2;

// Функция высшего порядка для композиции
function compose<T>(f: (x: T) => T, g: (x: T) => T): (x: T) => T {
  return (x: T) => f(g(x));
}

// Использование
const addThenMultiply = compose(multiply2, add10);
console.log(addThenMultiply(5)); // (5 + 10) * 2 = 30

Примеры 4: Декоратор функции

Декоратор — это функция, которая "оборачивает" другую функцию, добавляя функциональность:

function withLogging(fn: (x: number) => number): (x: number) => number {
  return (x: number) => {
    console.log(`Calling function with argument: ${x}`);
    const result = fn(x);
    console.log(`Result: ${result}`);
    return result;
  };
}

const add5 = (x: number) => x + 5;
const add5WithLogging = withLogging(add5);

add5WithLogging(10);
// Output:
// Calling function with argument: 10
// Result: 15

Примеры 5: Функции-фабрики

Функция, которая создаёт другие функции:

function createAdder(n: number): (x: number) => number {
  return (x: number) => x + n;
}

const add5 = createAdder(5);
const add10 = createAdder(10);

console.log(add5(3)); // 8
console.log(add10(3)); // 13

React HOC (Higher-Order Component)

В React высший порядок используется для создания компонентов-обёрток:

import React from 'react';

// HOC
function withTheme<P extends object>(Component: React.ComponentType<P>) {
  return (props: P) => {
    const theme = 'dark';
    return <Component {...props} theme={theme} />;
  };
}

// Компонент
interface ButtonProps {
  theme?: string;
}

const Button: React.FC<ButtonProps> = ({ theme }) => (
  <button style={{ background: theme === 'dark' ? '#333' : '#fff' }}>
    Click me
  </button>
);

// Применение HOC
export const ThemedButton = withTheme(Button);

Примеры 6: Каррирование с помощью HOF

// Функция высшего порядка для каррирования
function curry(fn: (...args: any[]) => any) {
  return function curried(...args: any[]): any {
    if (args.length >= fn.length) {
      return fn(...args);
    }
    return (...nextArgs: any[]) => curried(...args, ...nextArgs);
  };
}

const add = (a: number, b: number, c: number) => a + b + c;
const curriedAdd = curry(add);

console.log(curriedAdd(1)(2)(3)); // 6
console.log(curriedAdd(1, 2)(3)); // 6
console.log(curriedAdd(1)(2, 3)); // 6

Преимущества функций высшего порядка

• Переиспользуемость — одна функция может применяться к разным задачам
• Абстракция — скрывает сложность за простым интерфейсом
• Композиция — легко комбинировать несколько функций
• Функциональное программирование — позволяет писать код в стиле FP
• Избегаем дублирования — DRY принцип

Когда использовать HOF

Используй HOF когда:

• Нужно применить одну логику к разным функциям
• Хочешь создать абстракцию над повторяющимся кодом
• Нужна композиция функций
• Работаешь с асинхронностью (Promise, async/await)

Сравнение подходов

// ❌ Без HOF — дублирование кода
function loggedAdd(a, b) {
  console.log(`Adding ${a} + ${b}`);
  return a + b;
}

function loggedMultiply(a, b) {
  console.log(`Multiplying ${a} * ${b}`);
  return a * b;
}

// ✅ С HOF — переиспользуемо
function withLogging(fn) {
  return (...args) => {
    console.log(`Calling ${fn.name} with ${args}`);
    return fn(...args);
  };
}

const loggedAdd = withLogging((a, b) => a + b);
const loggedMultiply = withLogging((a, b) => a * b);