부분 적용
일부 인수를 고정하여 함수를 재사용합니다.
부분 적용은(는) CoddyKit의 무료 JavaScript Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 JavaScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
부분 적용이란 무엇인가요
부분 적용은 여러 인수가 필요한 함수를 가져와 일부 인수를 미리 고정하고, 나머지 인수만 필요로 하는 새로운 함수를 만드는 것을 의미합니다.
이를 통해 일반 함수로부터 특화된 함수를 만들 수 있습니다. 일반적인 multiply(a, b)는 a = 2를 고정하여 특화된 double(b)로 만들 수 있습니다.
인수가 많은 함수
범용 함수를 만드는 것부터 시작하겠습니다. 여기서 add는 세 개의 숫자를 받습니다. 첫 번째 인수를 동일하게 하여 이 함수를 반복해서 호출하는 경우가 많습니다.
function add(a, b, c) {
return a + b + c;
}
console.log(add(1, 2, 3));
console.log(add(1, 10, 100));수동으로 인수 고정하기
가장 간단한 부분 적용은 인수 하나를 코드에 직접 지정하고 나머지를 전달하는 래퍼 함수를 만드는 것입니다.
function add(a, b, c) {
return a + b + c;
}
function addTen(b, c) {
return add(10, b, c);
}
console.log(addTen(2, 3));
console.log(addTen(20, 30));bind를 사용한 부분 적용
Function.prototype.bind는 이 용도로 만들어졌습니다. 첫 번째 인수는 this를 설정하고, 그 뒤의 모든 인수는 왼쪽부터 미리 채워집니다.
this가 중요하지 않을 때는 null을 전달하십시오.
function add(a, b, c) {
return a + b + c;
}
const addTen = add.bind(null, 10);
console.log(addTen(2, 3));
console.log(addTen(20, 30));두 개 이상의 인수 바인딩하기
앞쪽의 인수를 여러 개 한 번에 고정할 수 있습니다. 반환된 함수는 남은 인수를 받습니다.
function add(a, b, c) {
return a + b + c;
}
const addElevenAndTwo = add.bind(null, 11, 2);
console.log(addElevenAndTwo(7));
console.log(addElevenAndTwo(100));재사용 가능한 부분 적용 도우미
나머지 매개변수로 미리 설정한 인수를 캡처하고 전개 구문으로 나중에 전달된 인수와 합치는 자체 partial을 작성할 수 있습니다.
function partial(fn, ...preset) {
return function (...later) {
return fn(...preset, ...later);
};
}
function greet(greeting, name) {
return greeting + ', ' + name + '!';
}
const sayHello = partial(greet, 'Hello');
console.log(sayHello('Ada'));
console.log(sayHello('Linus'));일반 함수를 특화하기
하나의 일반 함수에서 작고 읽기 쉬운 특화 함수 여러 개를 만들 때 부분 적용이 특히 빛을 발합니다.
function multiply(a, b) {
return a * b;
}
const double = multiply.bind(null, 2);
const triple = multiply.bind(null, 3);
console.log(double(5));
console.log(triple(5));배열을 사용한 부분 적용
특화된 함수는 map과 같은 배열 메서드 안에서 깔끔하게 읽힙니다.
function power(exponent, base) {
return Math.pow(base, exponent);
}
const square = power.bind(null, 2);
console.log([1, 2, 3, 4].map(square));설정 미리 채우기
실무에서 흔히 사용하는 방법은 세율이나 통화 기호와 같은 설정값을 고정한 뒤 그 결과를 여러 곳에서 재사용하는 것입니다.
function format(symbol, amount) {
return symbol + amount.toFixed(2);
}
const usd = format.bind(null, '$');
const eur = format.bind(null, '\u20AC');
console.log(usd(9.5));
console.log(eur(9.5));부분 적용과 기본 매개변수 비교
기본 매개변수는 인수가 누락된 경우 대체값을 제공합니다. 부분 적용은 값을 고정하므로 호출자가 해당 위치의 값을 더 이상 변경할 수 없습니다.
두 기능은 서로 다른 문제를 해결합니다. 기본값은 선택 사항이고, 부분 적용은 고정된 값입니다.
function log(level, message) {
return '[' + level + '] ' + message;
}
const error = log.bind(null, 'ERROR');
console.log(error('Disk full'));
console.log(error('Timeout'));부분 적용이 중요한 이유
부분 적용은 반복을 줄이고 의도를 명확하게 표현하며 커링의 기반이 됩니다. 같은 첫 번째 인수를 계속 전달하고 있다면 한 번 고정하는 방법을 고려해 보십시오.
function between(min, max, value) {
return value >= min && value <= max;
}
const isPercentage = between.bind(null, 0, 100);
console.log(isPercentage(50));
console.log(isPercentage(150));빠른 확인
fn.bind(null, 5)는 무엇을 반환할까요?
복습: 부분 적용
인수를 미리 고정하는 방법을 배웠습니다.
- 수동 래퍼는 인수 하나를 코드에 직접 지정하고 나머지를 전달합니다.
- bind(null, ...args)는 왼쪽부터 인수를 미리 채웁니다.
- 사용자 정의
partial도우미는 나머지 매개변수와 전개 구문을 사용합니다. - 부분 적용은 명확하고 재사용 가능한 특화 함수를 만들며 커링을 위한 기반을 마련합니다.
자주 묻는 질문
“부분 적용” 강의는 무료인가요?
네 — “부분 적용” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 JavaScript Academy 강의 전체를 잠금 해제할 수 있습니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“부분 적용”에서 뭘 배우나요?
일부 인수를 고정하여 함수를 재사용합니다. 브라우저에서 직접 실행하는 실습 코드로 JavaScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
JavaScript Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 JavaScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.
“부분 적용” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 JavaScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 JavaScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.