Chapter 3 - Item 26. bind로 함수를 커링하라

커링이란 다인자 함수 f(a, b, c)를 인자 하나만 받는 함수들의 체인으로 바꾸는 것.

커링을 하면 앞쪽 인자를 미리 고정해서(부분 적용) 새 함수를 만들어 재사용하기 쉬워진다.

// 커링을 사용한 함수
const currying = a => b => c => a * b * c;
console.log(currying(1)(2)(3)); // 6

// 인수 고정으로 재사용성 높이기
const alwaysMultiple2 = currying(1)(2);
console.log(alwaysMultiple2(3)); // 6

 

 

 

어떤 함수에 매번 같은 인자를 넣어 호출해야 하는 경우,
그 인자를 매번 써주는 건 귀찮은 일이기도 하고 실수할 가능성도 배제할 수 없다.

특히 이벤트 핸들러나 콜백에서 고정 인자를 전달해야 할 때 이런 문제가 자주 생긴다.

 

책에서는 이러한 문제를 해결하기 위해 Function.prototype.bind()를 사용하여 미리 고정할 값을 설정하라고 권한다.

function greet(greeting, name) {
  console.log(`${greeting}, ${name}!`);
}

const sayHelloTo = greet.bind(null, "Hello");

sayHelloTo("Alice"); // Hello, Alice!
sayHelloTo("Bob");   // Hello, Bob!

greet함수는 this를 안 쓰므로 bind의 첫번째 인자인 thisArg를 null 전달하고,

"Hello"를 bind의 두번째 인자이자 greet함수의 첫 번째 인자(greeting) 로 미리 고정함으로써 커링을 적용했다.

사실상 sayHelloTo는 greet함수의 두번째 인자인 name만 받는 함수이다. 

 

결국 bind가 “앞쪽 인자(Hello)”를 미리 채워 넣은 래퍼 함수(sayHelloTo)를 만들어 준 것.

 

 

---

 

 

 

ES6 이후, bind 없이도 화살표 함수나 기본 매개변수로 간단히 처리할 수 있는 경우가 많다.

 

 

1. 화살표 함수로 커링

const sayHelloTo = name => greet("Hello", name);

 

 

 

2. 함수 기본값 활용

function greet(greeting = "Hello", name) {
  console.log(`${greeting}, ${name}!`);
}

 

 

 

하지만, 여러 개 인자를 순차적으로 고정해야 하거나,
this 고정과 동시에 인자 고정이 필요한 경우에는 여전히 bind가 깔끔하다.

function multiply(a, b, c) {
  return a * b * c;
}

// 먼저 a = 2 고정
const timesTwo = multiply.bind(null, 2);

// 그리고 b = 3 고정
const timesTwoAndThree = timesTwo.bind(null, 3);

// 이제 c만 주면 됨
console.log(timesTwoAndThree(4)); // 2 * 3 * 4 = 24

 

 

bind를 사용하지 않았을 경우

function multiply(a, b, c) {
  return a * b * c;
}

// a = 2 고정
function timesTwo(b, c) {
  return multiply(2, b, c);
}

// b = 3 고정
function timesTwoAndThree(c) {
  return timesTwo(3, c);
}

console.log(timesTwoAndThree(4)); // 24

 

 

 

 

• bind는 단순히 this를 고정하는 것뿐만 아니라,
  인자를 미리 채워 넣은 새로운 함수를 만드는 기능도 한다.
• 이게 바로 커링(Currying) 기법의 한 형태다.
• 이벤트 처리나 반복 호출에서 코드 중복을 줄이고 실수를 예방하는 데 유용하다.