JS_기술 (1)_ 커링(currying)

JS에 존재하는 커링에 대해서 알아보자.

 

1. 커링이란?

커링은 함수와 함께 사용하는 고급기술로, JS 뿐 아니라 다른 언어에서도 사용할 수 있는 기술이다.

필요한 인자보다 적은 수의 인자를 받으면, 나머지 인자를 인자로 받는 다른 함수를 반환한다.

 

즉, 한 함수를 실행하기 위해 필요한 인자가 아직 덜 준비 되었을 경우

현재 존재하는 인자를 저장하기 위해서 커링으로 작성할 수 있다.

 

예시 1)

아래는 일반적으로 함수를 작성한 경우이다.

function mulTwoTerm (a, b, c, d) {
  return (a + b) * (c + d);
}

const mulTwoTerm2 = (a, b, c, d) => (a + b) * (c + d);

console.log(
  mulTwoTerm(1, 2, 3, 4),
  mulTwoTerm2(1, 2, 3, 4),
);

>>> 21 21

이러한 경우 함수 호출 시 한 번에 4개의 인자를 모두 받은 후 값을 반환한다.

 

예시 2)

아래는 커링으로 함수를 작성한 경우이다.

function curryMulTwoTerm (a){
  return function (b) {
    return function (c) {
      return function (d) {
        return (a + b) * (c + d);
      }
    }
  }
}

const curryMulTwoTerm2 = a => b => c => d => (a + b) * (c + d);

console.log(
  curryMulTwoTerm(1)(2)(3)(4),
  curryMulTwoTerm2(1)(2)(3)(4),
);

>>> 21 21

호출 시 일반적인 함수와 다른 것을 알 수 있다.

매개변수에 값을 전달할 때 한 번에 처리하는 것이 아닌 하나씩 전달하는 방식이다.

 

 

이를 활용하는 예시를 좀 더 살펴보자.

const curryMulTwoTermA = curryMulTwoTerm(1);
const curryMulTwoTermB = curryMulTwoTerm(1)(2);
const curryMulTwoTermC = curryMulTwoTerm(1)(2)(3);

console.log(curryMulTwoTermA);
console.log(curryMulTwoTermB);
console.log(curryMulTwoTermC);

>>>
ƒ (b) {
    return function (c) {
      return function (d) {
        return (a + b) * (c + d);
      }
    }
  }

>>>
ƒ (c) {
      return function (d) {
        return (a + b) * (c + d);
      }
    }
    
>>> 
ƒ (d) {
        return (a + b) * (c + d);
    }

위의 결과를 보면 원 함수의 인자보다 적게 전달을 한 경우

각각의 단계 별 함수를 반환하는 것을 알 수 있다.

 

이를 이어서 추가로 값을 전달하면

console.log(
curryMulTwoTermA(2)(3)(4),
curryMulTwoTermB(3)(4),
curryMulTwoTermC(4)
);

>>> 21 21 21

모두 같은 값을 반환하도록 값을 전달한 예시이다.

 

이처럼 함수 실행에 필요한 모든 인자를 한 번에 받을 수 없는 경우

커링을 통해 작성한 함수를 활용할 수 있다.