[TIL] 250512_Javascript: 커링(Currying)

📌 커링이란?

커링이란, 여러 개의 인자를 받는 함수를 단일 인자를 받는 함수들의 함수열로 바꾸는 기법이다. 다시 말해, 여러 개의 인자를 한 번에 받지 않고, 하나씩 여러 차례 받는 형태로 변환한다.

function add(a) {
	return function(b) {
		return a + b;
	};
}

add(2)(3); // 5

const addTwo = add(2);
print(addTwo(3)); //5

예를 들어 두 수를 더하는 함수를 일반적으로 작성하면 add(2, 3) 처럼 두 개의 인자를 동시에 전달해야 한다. 하지만 커링을 적용하면 add(2)(3) 처럼 하나씩 나눠서 인자를 전달할 수 있다. 혹은 const addTwo = add(2); 처럼 함수를 미리 선언해둔 후, 필요할 때마다 재사용할 수도 있다.

커링의 장점

먼저 커링을 적용하면 코드의 재사용성이 증가한다.

// 커링 미적용
const numbers = [10, 20, 30, 40, 50]

const greaterThan30 = numbers.filter(n => n > 30)
const greaterThan20 = numbers.filter(n => n > 20)

위와 같은 코드에 커링을 적용하면 아래와 같이 재사용성을 개선할 수 있다.

// 커링 적용
const isGreaterThan = (min: number) => (value: number) => value > min

const numbers = [10, 20, 30, 40, 50]

const greaterThan30 = numbers.filter(isGreaterThan(30))
const greaterThan20 = numbers.filter(isGreaterThan(20))

또한 커링을 적용하면 함수 합성이 쉬워진다.
함수형 프로그래밍에서 함수 합성을 위해 compose() 나 pipe() 와 같은 함수를 활용하는데, 이때 커링을 적용하면 단일 인자 함수로 변환할 수 있기 때문에 compose() 나 pipe() 에 끼워 넣어 활용할 수 있다.

const add = a => b => a + b;
const square = x => x * x;
const toString = x => x.toString();

// pipe: 여러 개의 함수를 왼쪽에서 오른쪽으로 순차적으로 실행하는 함수 합성 도구
const pipe = (...fns) => input => 
	fns.reduce((acc, fn) => fn(acc), input);

const process = pipe(
	add(2),
	square,
	toString
);

console.log(process(3)); // "25"

위 코드에서 pipe 함수 내 fns는 [add(2), square, toString]일 것이고, input으로 들어오는 값을 사용해 fns 배열 내 요소들을 순회하며 reduce 함수가 실행될 것이다.

커링의 단점

• 성능 저하: 매개변수가 많아질수록 추가적인 함수 호출과 메모리 할당을 발생시켜 성능 이슈가 발생할 수 있다.
• 러닝 커브: 익숙하지 않은 사람들에게는 코드의 가독성을 저하시킬 수 있다.
• 어려운 디버깅: 함수 호출 구조가 복잡해지고 여러 단계로 나뉘어 있기 때문에, 추적이 더 어려워질 수 있다.

🤔 커링을 어디에 활용할 수 있을까?

1. 함수의 지연 실행: 클로저를 이용해 함수가 지연 실행되도록 할 수 있다.
2. React 내 이벤트 핸들러: 이벤트 핸들러를 커링 함수로 사용하면, 이벤트 핸들러에 추가적인 인자를 전달할 때 유용하며, 가독성도 좋아진다.
3. API 호출 처리: API 엔드포인트 경로를 확장하거나 데이터 처리 로직을 유연하게 구성할 수 있다.
4. 고차 컴포넌트: 고차 컴포넌트는 컴포넌트 간의 공통 로직을 추출해서 재사용하기 위해 사용되는데, 여기에 커링을 적용할 수 있다.
5. 팩토리 패턴: 팩토리패턴은 객체 지향 프로그래밍에서 객체 생성을 캡슐화하는 디자인 패턴으로, 동일한 프로퍼티를 가진 여러 작은 객체를 만들어낼 때 유용하다. 커링을 이용해 재사용 가능한 팩토리 함수를 구현할 수 있다.
6. Reducer 간소화: 커링 함수를 사용해 Redux 상태 관리의 Reducer를 더 명확하고 간결하게 표현해 Reducer 함수가 길어지거나 복잡해지지 않을 수 있다.

Reference

📄 커링(currying)이란 무엇인지 설명하고, 활용 예시를 들어줄 수 있나요?
✍🏻 JavaScript 커링(Currying) 이해하기: 6가지 실전 활용 사례