함수형 프로그래밍 고급패턴 중 하나로 함수를 재사용하는데 유용하게 쓰일 수 있는 고급패턴이다. 자바스크립트 내부에는 커링이 내장되어 있지 않지만 자바스크립트로도 구현이 가능하다.
예를 들어 우리가 배민을 예시로 들자면 어떤 스토어 안에 들어가면 메뉴 리스트가 쭉 나옵니다. 이런 개념으로 아래 코드을 보시면 이해하기 편합니다.
const order = (store) => (menu) => {
console.log(`${store} - ${menu}`);
};
// 사용하는 쪽에서 함수를 두 번 호출이 가능합니다.
order('중국집')('자장면')
order('중국집')('짬뽕')
order('중국집')('탕수육')
order('네네치킨')('후라이드치킨')
order('네네치킨')('오곡후라이드')
order('네네치킨')('레드마요치킨')
위에서 정의한 커링 order 함수를 es5 문법 으로 변경하면 다음 curry함수와 같습니다.👇👇
// es5 문법
function curry(func) {
return function curried(...args) {
if (args.length >= func.length) {
return func.apply(this, args);
} else {
return function (...args2) {
return curried.apply(this, args.concat(args2));
};
}
};
}
function sum(a, b, c) {
return a + b + c;
}
let curriedSum = curry(sum);
console.log(curriedSum(1, 2, 3)); // 6, 보통때 처럼 단일 callable 형식으로 호출하기
console.log(curriedSum(1)(2, 3)); // 6, 첫 번째 인수를 커링하기
console.log(curriedSum(1)(2)(3)); // 6, 모두 커링하기
// 결과
6
6
6
👉정리
즉 여기서 내가 말하고 싶은 것은 컬링 패턴을 사용해 호출하는 쪽에서 괄호를 자유롭게 추가하여 사용할 수 있습니다.
🤟응용
그럼 이것을 좀더 응용해서 많은 데이터중(object)에서 원하는 property값만 가져오도록 해봅시다.
// 다음과 같은 커링 함수가 있고
const get = (property) => (object) => object[property];
// 다음과 같은 사용하는데 2개의 함수를 호출하는데.
// 1번째 함수 인자는 property명이고,
// 2번째 함수 인자는 object를 넘겨주고 있다.
const obj = { id: 2, type: "ko", menu: "삼계탕", price: "12,000" };
console.log(get("menu")(obj));
console.log(get("price")(obj));
즉 위에 get함수의 역할은 1번째 함수 인자에 넣은 property명이 대로 2번째 함수 인자의 object에서 값을 꺼내오는 것입니다.
// 결과는 다음과 같다.
삼계탕
12,000
그럼 위에 get함수를 또 응용해서 원하는 property값 끼리 배열로 만들어 봅시다. 다음과 같은 API를 받아왔다고 가정해 봅시다.
