함수형 코딩 입문 / 커링, 컴포지션 es5로 구현해보기

함수형 코딩의 핵심 개념이라고 한다.

1. 커링 : 다중 인수를 갖는 함수를 단일 인수를 갖는 함수들의 함수열로 바꾸는 것을 말한다

const printAddr = (location) => (town) => console.log(`${location}시 ${town}구`);

printAddr('인천')('서'); // 인천시 서구

이렇게 함수가 함수를 반환하기 때문에 화살표가 두 개씩 보이면 커링이다.

이것을 es5로 구현해보자

function printAddr(location) {
    return function (town) {
        console.log(`${location}시 ${town}구`);
    };
}
printAddr('인천')('서');

printAddr 함수가 첫 번째 인자가 전달되었을 때 location변수를 담고 있는 렉시컬환경을 참조하는 클로저를 반환한다.

그래서 두 번째 인자가 전달될 때 클로저 함수에 town인자를 전달하면서 호출하는 것과 같다.

printAddr함수가 반환한 내부함수는 location이라는 변수가 없지만 클로저이기 때문에 문자열을 제대로 반환한다.

덕분에 이렇게 쓸 수도 있다.

const printIncheon = printAddr('인천');
const printSeoul = printAddr('서울');

printSeoul('강남'); // 서울시 강남구
printSeoul('마포'); // 서울시 마포구

printIncheon('서'); // 인천시 서구
printIncheon('부평'); // 인천시 부평구

2. 컴포지션 패턴

파이프라인처럼 인자가 주어진 함수들을 통과하는 패턴

const compose = (...fns) => (value) => fns.reduce((c, fn) => fn(c), value);

compose(
    fullName,
    appendAddr,
    removeNames,
    console.log
)({ id: 1, lastName: 'byun', firstName: 'kiwon' });

순수함수들을 모아서 파이프라인처럼 활용할 수 있다.

es5로 구현

function compose() {
    let arr = arguments;
    return function (value) {
       let index = 0;
       let result = value;
       while (index < arr.length) {
          result = arr[index](result);
          index++;
       }
       return result;
     };
 }

argument의 길이만큼 루프를 돌기 위해 index를 만들고 0으로 초기화

함수 실행결과를 저장해서 반환하기 위해 result를 선언 후 초기값으로 할당

루프를 돌면서 첫 번째 함수부터 실행하고 결과를 업데이트,

루프가 끝나면 최종 결과를 반환

 

시니어코딩 채널에서는 재귀함수를 활용함

function compose() {
    var fns = arguments;
    return function recursion(obj, i) {
       var i = i || 0;
       if (i < fns.length) {
          return recursion(fns[i](obj), ++i);
       }
       return obj;
    };
}

인덱스를 선언하고 arguments의 길이만큼 반복해서 호출하는 로직은 똑같지만 

재귀함수를 사용해서 훨씬 간단한 코드로 구현

 

참고: 유튜브 시니어코딩

https://www.youtube.com/watch?v=7afBIdMcCDU&list=PLEOnZ6GeucBVixAJGEnHvcGjzz1yrTyfO&index=5