Function Composition

아래의 글을 참고하여 이해한 내용을 바탕으로 쓴 글입니다.

Function composition in JavaScript

정의

특정 함수의 호출결과가 다음 함수들로 순차적으로 넘어가서 최종 결과를 산출하는 패턴
(express의 미들웨어와 유사한 패턴이구나)

사용법

기본적

직관적으로 먼저 처리할 함수를 다른 함수의 인자로 넣으면 된다.
그런데.. 100개의 함수를 합성해야 된다면?

const double = x => x * 2
const square = x => x * x
// Tradition approach
var output1 = double(2);
var output2 = square(output1);
console.log(output2);
// variant two
var output_final = square(double(2));
console.log(output_final);

reduce, reduceRight 활용

...args를 통해 n개의 함수를 넣을 수 있다.
reduceRight를 활용한 compose와
reduce를 활용한 pipe가 있는데, 함수가 직관적으로 순차적으로 실행된다는 점에서
pipe형식이 유용해 보인다. 리눅스의 파이핑과 유사하기도 하고.

// function composition of any number of functions
const compose = (...fns) => x => fns.reduceRight((y, f) => f(y), x); 
const double = x => x * 2
const square = x => x * x

// function composition
var output_final = compose(square, double)(2); // double, square 순으로 호출
console.log(output_final);

// function composition using pipe of any number of functions
const pipe = (...fns) => x => fns.reduce((y, f) => f(y), x); 
const double = x => x * 2
const square = x => x * x

// function pipe
var output_final = pipe(square, double)(2); // square, double 순으로 호출
console.log(output_final);

Function Composition 라이브러리 활용하기

Lodash에서 flow 메서드를 활용하면 간단하다.

function square(n) {
  return n * n;
}
 
var addSquare = _.flow([_.add, square]);
addSquare(1, 2);
// => 9

나중에 읽어 볼 자료

JAVASCRIPT FUNCTION COMPOSITION: WHAT’S THE BIG DEAL?