JavaScript Functional Programming

안녕하세요 triplexlab(트리플랩)입니다.
오늘은 함수 합성의 기초 컨셉을 이해해 봅시다.

중첩된 고차 함수 예시

const title = "Learning Function Composition 1";

const starToArr = str => str.split(" ");
const toLower = arr => arr.map(w => w.toLowerCase());
const joinWithDash = arr => arr.join("-");

const slug = joinWithDash(toLower(starToArr(title))) //중첩된 고차 함수 (가독성 문제, 유지보수 문제)
console.log(slug);

결과)
👉 learning-function-composition-1

이렇게 함수 호출할때 3개의 함수를 인자로 전달해서 호출하게 되는데 
가독성 문제, 유지보수 문제가 있습니다.

compose 사용 예시

const compose = (...functions) => input =>
	functions.reduceRight((acc, fn) => fn(acc), input);

const slug = compose(joinWithDash,toLower,starToArr)(title);// 👈 인자 순서가 오른쪽에서, 왼쪽 순서로 이해를 하면 됩니다.
console.log(slug);

결과)
👉 learning-function-composition-1

pipe 사용 예시

const compose = (...functions) => input =>
	functions.reduce((acc, fn) => fn(acc), input);

const slug = compose(starToArr,toLower,joinWithDash)(title); // 👈 인자 순서가 왼쪽에서, 오른쪽 순서로 이해를 하면 됩니다.
console.log(slug);

결과)
👉 learning-function-composition-1

위에서  중첩된 고차 함수쓸때 보다 확실히 compose와, pipe의 가독성이 좋아짐. 재사용도 좋아짐!! 
함수 합성의 기초 컨셉을 이해가잘 되었으면 좋겠습니다!!😀👍✅