[ES6] 커링 함수를 조합해서 사용하기 compose

2020/09/16 - [Web프론트엔드/자바스크립트] - [ES6] 화살표 함수와 커링 디자인 패턴

[ES6] 화살표 함수와 커링 디자인 패턴

---

 처음부터 링크를 대문짝만 하게 달아놓은 이유는, 오늘 포스팅이 저 글의 연장선에 있기 때문입니다. 따라서 꼭 상기한  링크를 확인해 주시고 이번 글을 읽으시면 많은 도움이 됩니다. 그럼 일단 간략하게 지난 포스팅을 설명하겠습니다.

 

const plus = (a, b) => a + b;
const multiply = (a, b) => a * b;
const squared = (x) => x * x;

const plusX = (x) => (y) => plus(x, y);
const multiplyX = (x) => (y) => multiply(x, y);

const plusY = plusX(6);
console.log(plusY(4)); // 10

const multiplyY = multiplyX(6);
console.log(multiplyX(6)(4)); // 24

const plus_multiply_squared = (x) => plusY(multiplyY(squared(x)));

const result = plus_multiply_squared(2);
console.log(result); // 30

 

지난 시간에 배운 화살표 함수와 커링 디자인 패턴입니다. 함수형 프로그래밍이라고도 하는데 쉽게 설명드리면 함수의 인자수를 극단적으로 줄여 서로의 조합만으로 기능을 구현하는 것입니다. 이렇게 하면 함수의 재활용이 용이합니다.

그래서 오늘은 커링 함수들을 조합해서 좀 더 실용적인 사용법을 배워보겠습니다. 먼저 아래 코드를 주목해 주세요.

 

const plus_multiply_squared = (x) => plusY(multiplyY(squared(x)));

 

PlusY 함수 안에 함수 안에 함수가 들어있습니다... 거기다 실제 처리 순서는 반대이지요. 이렇듯 커링 디자인 패턴은 함수의 재활용 측면에서는 좋지만 가독성이 많이 떨어집니다. 그렇다면 커링 함수를 조합해서 정리하는 함수를 또 만들면 되지 않겠습니까? 함수 지옥 arguments 특수 변수와 reduce 반복문을 사용합니다. 그럼 바로 가보시죠!

 

function compose() {
  // 들어온 인자(함수)들을 배열로 변경
  const arr1 = Array.prototype.slice.call(arguments);
  // reduce 반복문
  return arr1.reduce(
    // 함수 순서 정리
    function (prev, next) {
      return function () {
        // 한번 더 인자 변경
        const arr2 = Array.prototype.slice.call(arguments);
        // prev에 인자 정리해서 next함수에 넣기
        return next(prev.apply(null, arr2));
      };
    },
    // 초기 함수 형태 정의
    function (a) {
      return a;
    }
  );
}

// 계산 순서 대로 인자 적용
const composeFormula = compose(squared, multiplyY, plusY);
console.log(composeFormula(2)); // 30

 

설명이 거창했지만 그냥 단순히 계산 순서를 인간이 알아보기 쉽게 변경한 것뿐입니다. 순서가 왼쪽에서 오른쪽으로!

const plus_multiply_squared = (x) => plusY(multiplyY(squared(x)));
const composeFormula = compose(squared, multiplyY, plusY);

 

지난 ES6 관련 포스팅에서 배운 전개 연산자를 사용하면 더욱 간결한 코드 표현이 가능합니다.

function compose(...arr1) {
  return arr1.reduce(
    function (prev, next) {
      return function (...arr2) {
        return next(prev(...arr2));
      };
    },
    function (a) {
      return a;
    }
  );
}

 

 오늘은 여기까지 입니다. 커링은 사용법보다 개념을 이해하시는 게 중요하다고 생각합니다.

그러니 꼭 한 번은 실습해보시길 권해 드립니다. 그럼 빠이 짜이찌엔~

 

---

2020.12.07 - [웹 프론트엔드/자바스크립트] - [ES6] 기존 javascript 비동기 방식과 새로운 Promise 함수

[ES6] 기존 javascript 비동기 방식과 새로운 Promise 함수