함수형 프로그래밍 - compose와 pipe로 깔끔한 코드 만들기 > 웹프로그램

프로그래밍을 하다 보면, 여러 개의 함수를 순서대로 적용해야 할 때가 자주 있습니다.

이럴 때 자연스럽게 "결과를 다음 함수로 넘기고 또 넘기는" 흐름이 생기죠.
하지만 이런 코드를 평범하게 작성하면 중첩 호출이나 변수의 중복 선언으로 코드가 복잡해지기 쉽습니다.

예를 하나 볼까요?

const result = capitalize(trim(replace(input)));

여기서 문제가 뭘까요?

• 읽기 힘듭니다. 어떤 작업이 먼저 일어나는지 직관적이지 않습니다.

• 수정이 어렵습니다. 하나라도 바꾸려면 중첩된 괄호를 신경 써야 합니다.

이 문제를 함수형 프로그래밍은 어떻게 해결할까요?
바로 compose와 pipe라는 두 개의 마법 도구를 통해서입니다.

compose - 오른쪽에서 왼쪽으로

compose는 오른쪽에서 왼쪽으로 함수를 적용합니다.
수학적 함수 합성 개념과 같습니다.

const trim = (str) => str.trim();

const toUpperCase = (str) => str.toUpperCase();

const exclaim = (str) => str + '!';

const shout = compose(exclaim, toUpperCase, trim);

console.log(shout('  hello world  ')); // "HELLO WORLD!"

해석:

• trim으로 공백을 없애고

• toUpperCase로 대문자로 만들고

• exclaim로 느낌표를 붙입니다.

오른쪽부터 차례차례 적용됩니다.
코드 읽기가 훨씬 자연스럽지 않나요?

pipe - 왼쪽에서 오른쪽으로

반면에 pipe는 왼쪽에서 오른쪽으로 함수를 적용합니다.
사람의 사고 흐름(1단계 → 2단계 → 3단계)과 비슷하기 때문에 읽기가 아주 쉽습니다.

const shout = pipe(trim, toUpperCase, exclaim);

console.log(shout('  hello world  ')); // "HELLO WORLD!"

해석:

• 먼저 trim

• 그다음 toUpperCase

• 마지막으로 exclaim

왼쪽부터 오른쪽으로 순서대로 읽어 내려갑니다.
글을 읽는 것처럼 자연스럽게 이해할 수 있습니다.

실제 개발에서는 pipe를 더 많이 씁니다.

"작업을 단계별로 이어가는 느낌" 이 코드 읽기를 훨씬 쉽게 만들어주기 때문입니다.

ompose와 pipe는 단순한 편의 기능이 아닙니다.

• 코드를 짧고 간결하게 만들어주고

• 함수 재사용성을 높여주며

• 무엇보다 읽기 좋은 코드를 만들어줍니다.