Front-end/JavaScript

JS 클로저 4편 - Currying(함수 커링 기법)

파리외 개발자 2023. 1. 14. 19:23

Currying

커링은 두 개 이상의 인자를 받는 함수의 구조를 분리하여 

인자를 받는 중간에 개입할 수 있게 하는 방법이다.

const multiplyBy = function (num1) {
  return function (num2) {
    return num1 * num2;
  };
};

const multiplyByTwo = multiplyBy(2);
multiplyByTwo(4);
multiplyByTwo(5);

const multiplyByFive = multiplyBy(5);
multiplyByFive(4);
multiplyByFive(5);

함수의 first class 성질을 이용해 외부 함수를 변수에 저장하며

리턴을 함수로 작성하게 되면 변수에는 리턴문인 외부함수가 저장되게 된다.

num1의 인자에 2가 전달된 상태의 리턴함수가 변수에 저장

함수가 저장된 변수에 나머지 num2인자를 전달하면

num1에 2가 저장된 상태를 계속해서 사용할 수 있다.

arrow func version

const multiBy = (num1) => (num2) => {
  return num1 * num2;
};

multiBy(7)(4);

const multiByTwo = multiBy(2);
multiByTwo(1);
multiByTwo(12);

const multiBySix = multiBy(6);
multiBySix(4);
multiBySix(7);

화살표 함수 버전이라 했지만 사실 커링은 화살표함수로 더 자주 사용된다.

표현식 방식으로 작성한 예시는 커링의 설명을 위한 것

커링을 사용해 각 단계의 인자가 저장된 상태의 함수를 사용할 수 있으며

미들웨어 방식의 함수를 커링으로 쉽게 작성할 수 있다.