Pipelining & Composing: улучшаем читаемость кода. Реализация на TypeScript

Как часто вам приходилось видеть что-то подобное в коде?

const result = fnD(fnC(fnB(fnA(...))));                    

Чтобы получить результат, нужно последовательно выполнить каждую функцию, начиная с самой внутренней. Это требует визуального «разворачивания» функций, что усложняет понимание логики кода. Когда мы сталкиваемся с таким кодом, то сразу осознаем, что его чтение и поддержка могут стать настоящим испытанием.

В этой статье мы рассмотрим, как можно значительно улучшить читаемость кода с помощью двух мощных техник: пайплайнинга (pipelining) и композиции функций (composing). Мы будем использовать TypeScript для демонстрации этих подходов.

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

const add = (a: number, b: number) => a + b; const square = (x: number) => x * x; const half = (x: number) => x / 2; 

const result = half(square(add(2, 2))); // 8 

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

Pipelining

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

Реализация c использованием замыкания:

type FN = (...args: any[]) => any;  const pipeline = <FNS extends FN[]>(...fns: FNS) => {   return (...args: FNS) => { let result = fns[0](...args); for (let i = 1; i < fns.length; i++) {   result = fns[i](result); } return result;   }; };

pipeline( add,  square,  half )(2, 2); // 8 

Как мы видим, использование pipeline() облегчает читаемость кода, т.к. создает линейный поток данных и благодаря этому, устраняет сложную вложенность вызовов функций.

Напишем pipeline() с использованием метода reduce():

const pipeline = <FNS extends FN[]>(...fns: FNS) => {   return fns.reduce( (prevFn: FN, nextFn: FN) =>   (...args: Parameters<FNS[0]>) =>     nextFn(prevFn(...args))   ); }; 

Применение метода reduce() позволяет написать более элегантную реализацию pipeline().

Composing

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

Реализация c использованием замыкания:

const compose = <FNS extends FN[]>(...fns: FNS) => {   return (...args: FNS) => { let result = fns[fns.length - 1](...args); for (let i = fns.length - 2; i >= 0; i--) {   result = fns[i](result); } return result;   }; }; 

Реализация с использованием pipeline():

const compose = <FNS extends FN[]>(...fns: FNS) => { return pipeline(...fns.reverse()); }; 

compose( half,  square,  add )(2, 2);  // 8 

Заключение:

В статье мы рассмотрели две техники — pipelining и composing.

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

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

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