26. Функции высшего порядка

JavaScript: Мозги. Урок 4: Функции высшего порядка

Функции высшего порядка - мощный инструмент в JavaScript, позволяющий писать более гибкий и переиспользуемый код. Они принимают другие функции в качестве аргументов или возвращают функции в качестве результата.

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

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

• принимает одну или несколько функций в качестве аргументов,
• возвращает функцию в качестве результата,
• или делает и то, и другое.

Другими словами, это функции, которые оперируют другими функциями.

Пример 1: Функция, принимающая другую функцию в качестве аргумента

function greet(name, greetingFunction) {
  // Используем greetingFunction для создания приветствия
  const greeting = greetingFunction(name);
  console.log(greeting);
}

function sayHello(name) {
  return "Hello, " + name + "!";
}

function sayGoodbye(name) {
  return "Goodbye, " + name + "!";
}

// Передаем функцию sayHello в качестве аргумента
greet("Alice", sayHello); // Выведет: Hello, Alice!

// Передаем функцию sayGoodbye в качестве аргумента
greet("Bob", sayGoodbye); // Выведет: Goodbye, Bob!

В этом примере greet - функция высшего порядка, потому что она принимает greetingFunction в качестве аргумента.

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

function multiplier(factor) {
  // Возвращаем функцию, которая умножает число на factor
  return function(number) {
    return number * factor;
  }
}

// Создаем функцию, которая умножает на 2
const double = multiplier(2);

// Создаем функцию, которая умножает на 5
const multiplyByFive = multiplier(5);

console.log(double(3)); // Выведет: 6
console.log(multiplyByFive(4)); // Выведет: 20

Здесь multiplier - функция высшего порядка, потому что она возвращает другую функцию. Возвращаемая функция “помнит” значение factor благодаря замыканию (closure).

Практические примеры кода

1. Array.map()

const numbers = [1, 2, 3, 4, 5];

// Используем map для создания нового массива, где каждый элемент умножен на 2
const doubledNumbers = numbers.map(function(number) {
  return number * 2;
});

console.log(doubledNumbers); // Выведет: [2, 4, 6, 8, 10]

2. Array.filter()

const numbers = [1, 2, 3, 4, 5, 6];

// Используем filter для создания нового массива, содержащего только четные числа
const evenNumbers = numbers.filter(function(number) {
  return number % 2 === 0; // Возвращает true, если число четное
});

console.log(evenNumbers); // Выведет: [2, 4, 6]

3. Array.reduce()

const numbers = [1, 2, 3, 4, 5];

// Используем reduce для суммирования всех элементов массива
const sum = numbers.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 0); // 0 - начальное значение accumulator

console.log(sum); // Выведет: 15

Жизненный пример

Функции высшего порядка широко используются в современных JavaScript фреймворках и библиотеках, таких как React, Angular, и Vue.js.

Например, в React компоненты часто создаются с использованием функций высшего порядка для добавления дополнительной логики, такой как логирование, обработка ошибок или управление состоянием. Функции высшего порядка позволяют переиспользовать эту логику между разными компонентами.

Redux, популярная библиотека для управления состоянием в React-приложениях, активно использует функции высшего порядка для создания middleware, которые перехватывают и обрабатывают действия (actions) перед тем, как они попадут в reducer.

В Angular, декораторы - это по сути функции высшего порядка, которые добавляют метаданные к классам и методам, позволяя фреймворку правильно обрабатывать их.

Ключевые моменты

• Функции высшего порядка позволяют писать более модульный и переиспользуемый код.
• Array.map(), Array.filter(), и Array.reduce() - распространенные примеры функций высшего порядка, встроенных в JavaScript.
• Они широко используются во фреймворках и библиотеках для добавления дополнительной логики и расширения функциональности.
• Понимание функций высшего порядка - важный шаг к освоению продвинутых концепций JavaScript.

Интерактивный пример