함수의 합성 - compose() 와 pipe()

원문: Functional Composition: compose() and pipe()

함수는 함수형 프로그래밍의 핵심이다.

함수형 프로그래밍의 기본 아이디어는 함수들을 엮는 것이다. 한 가지 기능을 수행하는 작은 함수들을 조립하여 하여 복잡한 기능 을 생성한다.

이것이 바로 **함수의 합성(function composition)**이다. 이것은 한 함수의 출력을 다른 함수의 입력 으로 전달함으로써 달성된다.

합성의 기초

아래의 수학 함수를 살펴보자.

f(x) = x + 2

g(x) = 4x

위의 함수를 아래와 같이 합성할 수 있을 것이다.

f(g(x)) = 4x + 2
// 또는
g(f(x)) = 4x + 8

맨 처음 수학 함수를 코드로 작성하면 아래와 같다,

const addTwo = x => x + 2;

const multiplyByFour = x => 4 * x;

마찬가지로 다음과 같이 합성할 수 있을 것이다.

const composed1 = X => addTwo( multiplyByFour(X) );
// 또는
const composed2 = X => multiplyByFour( addTwo(X) );

결과는 아래와 같다.

/resource/yongkwan/33/01.gif

문제

문제는 이와 같이 함수를 합성하는 것은 적합 하지 않다는 것이다. 많은 함수들이 존재한다면, 그 함수들의 합성은 아래처럼 보일 것이다.

func1(func2(func3(func4(func5(func6(func7(x)))))))

읽기 참 어려운 코드다.

이것을 어떻게 해결할까? 답은 compose()와 pipe()이다.

compose()

compose()는 **인자를 함수로 받는데 **, 데이터 플로우는 오른쪽에서 왼쪽으로이어지며 인자들을 결합한다. 그 다음 결합 된 함수를 반환한다.

/resource/yongkwan/33/02.png

구현은 다음과 같다.

const compose = (...fns) => {
	 return x => {
		return fns.reduceRight((y, f) => f(y), x)
	 }
 }

사용 법은 아래와 같다.

const addTwo = x => x + 2;
const multiplyByFour = x => 4 * x;
const composeFunc = compose(multiplyByFour, addTwo)
const result = composeFunc(3)

왼쪽 <-- 오른쪽으로 데이터가 흐르고 있음을 알수 있다.

20 <-- multiplyByFour(5) <-- 5 <-- addTwo(3) <-- 3

이전에 함수의 합성보다 훨씬 낫다. 😊

pipe()

pipe()는 compose()와 거의 동일하다. 유일한 차이가 하나 있는데, pipe()는 데이터 이동이 왼쪽 --> 오른쪽으로반대 방향이다.:

/resource/yongkwan/33/03.png

구현은 아래와 같다. 유일한 차이점은 Array.prototype.reduceRight대신 Array.prototype.reduce이 사용 된다는 것이다.

const pipe = (...fns) => {
	 return x => {
		return fns.reduce((y, f) => f(y), x)
	 }
 }

사용법은 다음과 같다. 유일한 차이점은 addTwo 와 multiplyByFour 가 서로 바뀐 위치다. 다시 말하지만 이는 pipe()에서 왼쪽 --> 오른쪽으로 데이터를 이동 하기 때문이다.

const addTwo = x => x + 2;
const multiplyByFour = x => 4 * x;
const pipeFunc = pipe(addTwo, multiplyByFour)
const result = pipeFunc(3)

왼쪽 --> 오른쪽 데이터 흐름이 더 자연 스럽기 때문에 개인적으로 compose()보다 pipe()를 선호한다 .

오른쪽에서 왼쪽으로 쓰는 언어 이용자, 수학자는 compose()를 선호할 것 같다.