Compose повсюду: композиция функций в JavaScript

Перевод статьи подготовлен специально для студентов курса «JavaScript Developer.Basic».

---

Введение

Кажется, библиотеки Lodash и Underscore теперь используются повсюду, и в них до сих пор есть известный нам суперэффективный метод compose.

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

Основы

Мы рассмотрим много функций Lodash, потому что 1) мы не собираемся писать собственные базовые алгоритмы — это отвлечет нас от того, на чем я предлагаю сконцентрироваться; и 2) библиотека Lodash используется многими разработчиками, и ее можно без проблем заменить на Underscore, любую другую библиотеку или ваши собственные алгоритмы.

Прежде чем рассмотреть несколько простых примеров, давайте вспомним, что именно делает функция compose, и разберемся, как при необходимости реализовать собственную функцию compose.

var compose = function(f, g) {
    return function(x) {
        return f(g(x));
    };
};

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

А теперь рассмотрим этот код:

function reverseAndUpper(str) {
  var reversed = reverse(str);
  return upperCase(reversed);
}

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

var reverseAndUpper = compose(upperCase, reverse);

Теперь можно использовать функцию reverseAndUpper:

reverseAndUpper('тест'); // ТСЕТ

Мы могли бы получить такой же результат, написав код:

function reverseAndUpper(str) {
  return upperCase(reverse(str));
}

Этот вариант выглядит более элегантным, его проще сопровождать и использовать повторно.

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

Давайте реализуем более гибкую функцию compose, которая может включать любое количество других функций и аргументов. Предыдущая функция compose, которую мы рассмотрели, работает только с двумя функциями и принимает только первый переданный аргумент. Мы можем переписать ее так:

var compose = function() {
  var funcs = Array.prototype.slice.call(аргументы);
 
  return funcs.reduce(function(f,g) {
    return function() {
      return f(g.apply(this, аргументы));
    };
  });
};

С такой функцией мы можем написать примерно такой код:

Var doSometing = compose(upperCase, reverse, doSomethingInitial);
 
doSomething('foo', 'bar');

Существует много библиотек, в которых реализована функция compose. Наша функция compose нужна нам, чтобы понять, как она работает. Конечно, в разных библиотеках она реализована по-своему. Функции compose из разных библиотек решают одну и ту же задачу, поэтому они взаимозаменяемы. Теперь, когда нам понятно, в чем суть функции compose, давайте на следующих примерах рассмотрим функцию _.compose из библиотеки Lodash.

Примеры

Начнем с простого:

function notEmpty(str) {
    return ! _.isEmpty(str);
}

Функция notEmpty — это отрицание значения, возвращаемого функцией _.isEmpty.

Мы можем добиться такого же результата с использованием функции _.compose из библиотеки Lodash. Напишем функцию not:

function not(x) { return !x; }
 
var notEmpty = _.compose(not, _.isEmpty);

Теперь можно использовать функцию notEmpty с любым аргументом:

notEmpty('foo'); // true
notEmpty(''); // false
notEmpty(); // false
notEmpty(null); // false

Это очень простой пример. Давайте рассмотрим что-нибудь посложнее:
функция findMaxForCollection возвращает максимальное значение из коллекции объектов со свойствами id и val (значение).

function findMaxForCollection(data) {
    var items = _.pluck(data, 'val');
    return Math.max.apply(null, items);
}
 
var data = [{id: 1, val: 5}, {id: 2, val: 6}, {id: 3, val: 2}];
 
findMaxForCollection(data);

Для решения этой задачи можно использовать функцию compose:

var findMaxForCollection = _.compose(function(xs) { return Math.max.apply(null, xs); }, _.pluck);
 
var data = [{id: 1, val: 5}, {id: 2, val: 6}, {id: 3, val: 2}];
 
findMaxForCollection(data, 'val'); // 6

Здесь есть над чем поработать.

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

function pluck(key) {
    return function(collection) {
        return _.pluck(collection, key);
    }
}

Функцию findMaxForCollection нужно еще немного подкрутить. Давайте создадим собственную функцию max.

function max(xs) {
    return Math.max.apply(null, xs);
}

Теперь можно сделать функцию compose более элегантной:

var findMaxForCollection = _.compose(max, pluck('val'));
 
findMaxForCollection(data);

Мы написали собственную функцию pluck и можем использовать ее только со свойством 'val'. Возможно, вам непонятно, зачем писать собственный метод выборки, если в Lodash уже есть готовая и удобная функция _.pluck. Проблема в том, что _.pluck ожидает коллекцию в качестве первого аргумента, а мы хотим сделать по-другому. Изменив порядок следования аргументов, мы можем применить функцию частично, передав ключ в качестве первого аргумента; возвращаемая функция будет принимать данные (data).
Можно еще немного подшлифовать наш метод выборки. В Lodash есть удобный метод _.curry, который позволяет записать нашу функцию так:

function plucked(key, collection) {
    return _.pluck(collection, key);
}
 
var pluck = _.curry(plucked);

Мы просто оборачиваем первоначальную функцию pluck, чтобы поменять местами аргументы. Теперь pluck будет возвращать функцию до тех пор, пока не обработает все аргументы. Посмотрим, как выглядит окончательный код:

function max(xs) {
    return Math.max.apply(null, xs);
}
 
function plucked(key, collection) {
    return _.pluck(collection, key);
}
 
var pluck = _.curry(plucked);
 
var findMaxForCollection = _.compose(max, pluck('val'));
 
var data = [{id: 1, val: 5}, {id: 2, val: 6}, {id: 3, val: 2}];
 
findMaxForCollection(data); // 6

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

var findMaxForCollection = _.compose(max, pluck('val'));

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

Возьмем данные из предыдущего примера и добавим новое свойство active (активный). Сейчас данные выглядят так:

var data = [{id: 1, val: 5, active: true}, 
            {id: 2, val: 6, active: false }, 
            {id: 3, val: 2, active: true }];

Назовем эту функцию getMaxIdForActiveItems(data). Она принимает коллекцию объектов, отфильтровывает все активные объекты и возвращает максимальное значение из отфильтрованных.

function getMaxIdForActiveItems(data) {
    var filtered = _.filter(data, function(item) {
        return item.active === true;
    });
 
    var items = _.pluck(filtered, 'val');
    return Math.max.apply(null, items);
}

А можно сделать этот код поэлегантнее? В нем уже есть функции max и pluck, поэтому нам остается лишь добавить фильтр:

var getMaxIdForActiveItems = _.compose(max, pluck('val'), _.filter);
 
getMaxIdForActiveItems(data, function(item) {return item.active === true; }); // 5

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

function filter(fn) {
    return function(arr) {
        return arr.filter(fn);
    };
}

Добавим функцию isActive, которая принимает объект и проверяет, присвоено ли флагу active значение true.

function isActive(item) {
    return item.active === true;
}

Функцию filter с функцией isActive можно применить частично, поэтому в функцию getMaxIdForActiveItems мы будем передавать только данные.

var getMaxIdForActiveItems = _.compose(max, pluck('val'), filter(isActive));

Теперь нам нужно лишь передать данные:

getMaxIdForActiveItems(data); // 5

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

var isNotActive = _.compose(not, isActive);

var getMaxIdForNonActiveItems = _.compose(max, pluck('val'), filter(isNotActive));

Заключение

Как вы могли заметить, композиция функций — это захватывающая возможность, которая делает код элегантным и позволяет использовать его многократно. Главное — применять ее правильно.

Ссылки

lodash
Hey Underscore, You're Doing It Wrong! (Эй, Underscore, ты все делаешь не так!)
@sharifsbeat

Читать ещё:

• Почему это антипаттерн?