커링 함수
여러 인수를 받는 함수를 연쇄 호출 형태로 변환합니다.
커링 함수은(는) CoddyKit의 무료 JavaScript Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 JavaScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
커링이란 무엇인가요
커링은 여러 인수를 받는 함수를 각각 하나의 인수만 받는 함수들의 연속으로 변환합니다.
add(1, 2, 3) 대신 add(1)(2)(3)을 호출합니다. 모든 인수가 수집될 때까지 호출할 때마다 다음 함수를 반환합니다.
손으로 커링 구현하기
커링을 이해하는 가장 명확한 방법은 중첩 함수를 작성하는 것입니다. 각 함수가 다음 함수를 반환하고 앞에서 받은 인수를 클로저로 감쌉니다.
function add(a) {
return function (b) {
return function (c) {
return a + b + c;
};
};
}
console.log(add(1)(2)(3));중첩 화살표 함수 반환
화살표 함수를 사용하면 커링 정의를 더 짧게 작성할 수 있습니다. 각 =>는 다음 화살표 함수를 반환하고, 마지막 함수가 실제 작업을 수행합니다.
const add = a => b => c => a + b + c;
console.log(add(1)(2)(3));
console.log(add(10)(20)(30));클로저는 인수를 기억합니다
커링은 클로저에 의존합니다. 반환된 각 함수는 바깥 스코프의 변수에 대한 참조를 유지하므로, 마지막 호출이 실행될 때까지 앞에서 받은 인수를 사용할 수 있습니다.
const greet = greeting => name => greeting + ', ' + name + '!';
const sayHi = greet('Hi');
console.log(sayHi('Ada'));
console.log(sayHi('Grace'));단계별로 호출하기
모든 인수를 한 번에 적용할 필요는 없습니다. 중간에 멈추고 부분 결과를 변수에 저장하여 재사용할 수 있습니다.
const add = a => b => c => a + b + c;
const addOne = add(1);
const addOneAndTwo = addOne(2);
console.log(addOneAndTwo(3));
console.log(addOneAndTwo(100));범용 커링 도우미
중첩 함수를 손으로 작성하는 일은 번거롭습니다. 범용 curry 도우미는 충분한 인수가 모일 때까지 인수를 수집한 다음 원래 함수를 호출합니다.
function curry(fn) {
return function curried(...args) {
if (args.length >= fn.length) {
return fn(...args);
}
return (...more) => curried(...args, ...more);
};
}
const add = curry((a, b, c) => a + b + c);
console.log(add(1)(2)(3));curry를 활용한 유연한 호출
좋은 curry 도우미는 인수를 어떤 방식으로 묶어 전달해도 처리합니다. fn.length는 원래 함수가 선언한 매개변수의 개수를 알려 줍니다.
function curry(fn) {
return function curried(...args) {
if (args.length >= fn.length) {
return fn(...args);
}
return (...more) => curried(...args, ...more);
};
}
const add = curry((a, b, c) => a + b + c);
console.log(add(1, 2, 3));
console.log(add(1, 2)(3));
console.log(add(1)(2, 3));특화를 위한 커링
커링을 사용하면 특화가 자연스러워집니다. 첫 번째 인수를 적용한 뒤 반환된 함수를 여러 호출에서 재사용할 수 있습니다.
const multiply = a => b => a * b;
const double = multiply(2);
const triple = multiply(3);
console.log(double(5));
console.log(triple(5));배열 메서드와 함께 사용하는 커링
커링된 함수는 각각 요소를 전달받을 준비가 된 한 인수 함수를 생성하므로 map과 filter에 완벽하게 맞습니다.
const greaterThan = min => value => value > min;
const over10 = greaterThan(10);
console.log([5, 12, 8, 20].filter(over10));커링과 partial 적용 비교
partial 적용은 일부 인수를 고정하고 나머지는 나중의 한 번의 호출에 남겨 둡니다. 커링은 항상 함수를 한 인수 호출의 연쇄로 나눕니다.
커링은 부분 적용을 완전히 분해한 특정 형태입니다.
const partial = (a, b) => c => a + b + c;
const curried = a => b => c => a + b + c;
console.log(partial(1, 2)(3));
console.log(curried(1)(2)(3));커링을 사용하는 이유
커링은 작고, 조합 가능하며, 재사용 가능한 함수를 만들도록 이끕니다. 또한 다음에 살펴볼 함수 합성과 자연스럽게 결합됩니다. 핵심은 커링된 함수가 결코 '미완성' 상태가 아니라는 점입니다. 필요한 인수를 모두 받을 때까지 그저 다른 함수를 반환합니다.
const tag = name => content => '<' + name + '>' + content + '</' + name + '>';
const bold = tag('b');
console.log(bold('important'));
console.log(tag('i')('slanted'));빠른 확인
const add = a => b => c => a + b + c;가 주어졌을 때, add(1)(2)는 무엇으로 평가될까요?
복습: 커링
함수를 한 인수 연쇄로 분해하는 방법을 배웠습니다.
- 커링된 함수는 클로저를 통해 인수마다 새로운 함수를 반환합니다.
- 중첩된 화살표를 사용하면 커링된 정의를 간결하게 작성할 수 있습니다.
- 일반적인
curry도우미는fn.length를 사용해 충분한 인수가 전달되었는지 확인합니다. - 커링을 사용하면 깔끔한 특화와 합성이 가능합니다.
자주 묻는 질문
“커링 함수” 강의는 무료인가요?
네 — “커링 함수” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 JavaScript Academy 강의 전체를 잠금 해제할 수 있습니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“커링 함수”에서 뭘 배우나요?
여러 인수를 받는 함수를 연쇄 호출 형태로 변환합니다. 브라우저에서 직접 실행하는 실습 코드로 JavaScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
JavaScript Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 JavaScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.
“커링 함수” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 JavaScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 JavaScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.