Функциональная композиция в JavaScript

Автор оригинала: FreeCodeCamp Community Member.

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

compose = (fn1, fn2) => value => fn2(fn1(value))

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

add2AndSquare = (n) => square(add2(n))

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

add2AndSquare = compose( add2, square)

Простая реализация композиции будет:

compose = (f1, f2) => value => f2( f1(value) );

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

compose = (...fns) => (initialVal) => fns.reduceRight((val, fn) => fn(val), initialVal);

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

// example
const add2        = (n) => n + 2;
const times2      = (n) => n * 2;
const times2add2  = compose(add2, times2);
const add6        = compose(add2, add2, add2);

times2add2(2);  // 6
add2tiems2(2);  // 8
add6(2);        // 8

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

function logProps(InputComponent) {
  InputComponent.prototype.componentWillReceiveProps = function(nextProps) {
    console.log('Current props: ', this.props);
    console.log('Next props: ', nextProps);
  };
  return InputComponent;
}

// EnhancedComponent will log whenever props are received
const EnhancedComponent = logProps(InputComponent);

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

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