자바스크립트 커링(currying)

함수의 매개변수가 채워지지 않았을 때 함수가 실행되지 않고 다음 함수로 넘겨지다가 모든 매개변수가 채워졌을 때 실행되는 것을 커링이라고 한다.

넹? 그게 머죵ㅎ..ㅎㅎ 😮🙄
이해를 위해 일반 함수와 커링 함수의 차이점을 비교해보기로 했다.

평범한 sum 함수

function sum(a, b){
  return a + b;
}

console.log(sum(1,2));

너무나도 평범하고 흔한 함수의 형태이다.
이 함수는 a와 b를 항상 매개변수로 받아야 하기 때문에 다음과 같은 형태로 사용할 수 없다.

sum(4, x);

즉, 4라는 값을 고정한 상태로 x값만 변경하고 싶을 경우 항상 sum함수를 호출할 때 2개의 매개변수를 채워야 한다는 의미이다.

function sum(a, b){
  return a + b;
}

function addFour(a){
  return sum(a, 4);
}

console.log ( addFour(1) ); // 5
console.log ( addFour(2) ); // 6

addFour 라는 함수를 만들어서 매개변수에 sum함수를 리턴하도록 했다.

커링으로 만들기

function sum(a, b){
  return a + b;
}

// function addFour(a){
//   return sum(a, 4);
// }

function add(b){
  return function(a){
    return sum(a, b);
  }
}

console.log(add(4)(2));

커링은 함수를 add(4, 2) 와 같이 호출하지 않고 add(4)(2) 처럼 사용할 수 있다.
여기까지만 보면 (4, 2)로 호출하나 (4)(2)로 호출하나 차이가 없어 보이지만, 다음과 같은 형태로 더할 값을 고정시키고(아래 코드에서는 4) x값만 변경해서 사용하는 함수를 만들어서 사용할 수 있다.

function sum(a, b){
  return a + b;
}

// function addFour(a){
//   return sum(a, 4);
// }

function add(b){
  return function(a){
    return sum(a, b);
  }
}

const myNumber = add(4);
console.log( myNumber(2) );

myNumber로 선언한 변수를 살펴보면 add함수에 4를 매개변수로 넣어서 함수를 리턴값을 받아오게 되고, 결국 위 코드에서 myNumber는

// myNumber
function(a){
    return sum(a, 4);
}

위와 같은 코드를 가진 함수가 되기 때문에 myNumber의 값인 4와 원하는 숫자를 입력하면 4 + x를 만들 수 있게 되는 것이다.

근데 또 막상 만들고보니까 간단해서 그런지 별로 쓸모가 없어보여서.......
모던 자바스크립트 튜토리얼을 조금 더 살펴보니 정보를 형식화해서 출력하는 네트워크 로그 함수와 같은 곳에서 유용하게 사용할 수 있다고 한다.

결론

• 커링을 사용하면 함수 합성에 유연하다.
• 클로저로 인해 커링이 가능하다.

---

참고 자료
모던 자바스크립트 튜토리얼 - 커링
curryingDemo