JavaScript Academy · Урок

Композиция функций

Объединяйте небольшие функции в конвейеры.

«Композиция функций» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.

Что такое композиция функций

Композиция функций объединяет небольшие функции в одну. При композиции f и g получается функция, в которой результат g становится входом для f.

Математически: compose(f, g)(x) = f(g(x)). Данные проходят справа налево.

Две небольшие функции

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

const double = x => x * 2;
const increment = x => x + 1;

console.log(double(5));
console.log(increment(5));

Композиция вручную

Самая явная композиция — просто вызов одной функции с результатом другой. Читайте выражение изнутри наружу: сначала выполняется increment, затем double.

const double = x => x * 2;
const increment = x => x + 1;

const result = double(increment(5));
console.log(result);

Функция compose для двух функций

Оберните этот шаблон в повторно используемый compose. Он принимает f и g и возвращает новую функцию, которая сначала применяет g, а затем f.

const compose = (f, g) => x => f(g(x));

const double = x => x * 2;
const increment = x => x + 1;

const doubleThenAfterIncrement = compose(double, increment);
console.log(doubleThenAfterIncrement(5));

Порядок имеет значение

Композиция не является коммутативной. compose(f, g) отличается от compose(g, f), потому что правая функция выполняется первой.

const compose = (f, g) => x => f(g(x));

const double = x => x * 2;
const increment = x => x + 1;

console.log(compose(double, increment)(5));
console.log(compose(increment, double)(5));

Чтение справа налево

Вызов compose(a, b, c)(x) вычисляется как a(b(c(x))). Самая правая функция первой получает входное значение. Помните об этом направлении, чтобы избежать ошибок.

const compose = (f, g) => x => f(g(x));

const shout = s => s.toUpperCase();
const exclaim = s => s + '!';

const loud = compose(shout, exclaim);
console.log(loud('hello'));

Композиция преобразований строк

Композиция отлично подходит для конвейеров обработки текста: trim, перевод в нижний регистр, затем вызов replace для замены пробелов; каждый шаг — небольшая функция.

const compose = (f, g) => x => f(g(x));

const trim = s => s.trim();
const lower = s => s.toLowerCase();

const clean = compose(lower, trim);
console.log(clean('   HELLO World  '));

Композиция с числами

Цепочка математических операций — классический пример. Каждую функцию легко отдельно протестировать.

const compose = (f, g) => x => f(g(x));

const square = x => x * x;
const negate = x => -x;

const negativeSquare = compose(negate, square);
console.log(negativeSquare(4));

Зачем нужна композиция

Композиция помогает каждой функции оставаться специализированной и повторно используемой, а также устраняет нагромождение вложенных вызовов. Вместо того чтобы разбросанно использовать в коде f(g(h(x))), вы один раз создаёте именованный конвейер и повторно его используете.

const compose = (f, g) => x => f(g(x));

const toCents = d => Math.round(d * 100);
const addLabel = c => c + ' cents';

const priceLabel = compose(addLabel, toCents);
console.log(priceLabel(2.5));

Композиция и каррирование вместе

Curried-функции прекрасно сочетаются в композиции, потому что каждая возвращает функцию с одним аргументом — именно то, что требуется композиции.

const compose = (f, g) => x => f(g(x));
const add = a => b => a + b;
const multiply = a => b => a * b;

const addThenDouble = compose(multiply(2), add(3));
console.log(addThenDouble(5));

Переход к множеству функций

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

const compose = (f, g) => x => f(g(x));
const a = x => x + 1;
const b = x => x * 2;
const c = x => x - 3;

const combined = compose(a, compose(b, c));
console.log(combined(10));

Быстрая проверка

Если compose = (f, g) => x => f(g(x)), что возвращает compose(double, increment)(5), если double умножает на 2, а increment прибавляет 1?

Повторение: композиция функций

Вы научились объединять функции:

compose(f, g)(x) равно f(g(x)) и вычисляется справа налево.
Порядок имеет значение: композиция не является коммутативной.
Композиция сохраняет функции небольшими, именованными и повторно используемыми.
Curried-функции легко компоновать. Далее вы обобщите этот подход на любое количество функций.

Часто задаваемые вопросы

Урок «Композиция функций» бесплатный?

Да — полный текст урока «Композиция функций» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.

Чему я научусь в уроке «Композиция функций»?

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

Нужен ли мне опыт, чтобы начать JavaScript Academy?

Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Композиция функций»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке JavaScript Academy?

Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к JavaScript Academy