JavaScript 부분 함수(Partial Function)란 무엇인가?
부분 함수(Partial Function)는 하나의 함수를 인자로 받고, 그와 함께 다른 타입의 인수들도 추가로 전달받는 기법입니다. 전달된 인수 중 일부를 미리 고정한 뒤, 나머지 인수를 받는 새로운 함수를 반환하는 방식으로 동작합니다. 반환된 함수가 실제로 호출되면, 처음에 고정했던 인수와 자신이 받은 인수를 모두 합쳐서 원래의 부모 함수를 실행합니다.
즉, 여러 개의 인수를 필요로 하는 함수에서 일부 인수만 먼저 적용해 둔 상태의 새로운 함수를 만드는 것입니다. 이러한 기법은 함수형 프로그래밍에서 부분 적용(partial application)이라고 불리며, 코드의 재사용성과 가독성을 높이는 데 매우 유용합니다.
예제 코드
다음은 JavaScript에서 부분 함수를 구현한 예제입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 18px;
font-weight: 500;
color: rebeccapurple;
}
</style>
</head>
<body>
<h1>Partial function in JavaScript</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>
Click on the above button to see partial function invocation
</h3>
<script>
let resultEle = document.querySelector(".result");
function partialFunction(f) {
return function (a) {
return function (b) {
return f(a, b);
};
};
}
function multiply(a, b) {
return a * b;
}
document.querySelector(".Btn").addEventListener("click", () => {
resultEle.innerHTML = "partialFunction(multiply) = " + partialFunction(multiply) + "<br>";
resultEle.innerHTML += "partialFunction(multiply)(22) = " + partialFunction(multiply)(22) + "<br>";
resultEle.innerHTML += "partialFunction(multiply)(22)(33) = " + partialFunction(multiply)(22)(33) + "<br>";
});
</script>
</body>
</html>출력 결과
위 코드를 실행하면 다음과 같은 초기 화면이 표시됩니다.
여기서 'CLICK HERE' 버튼을 클릭하면 아래와 같이 부분 함수의 각 단계별 호출 결과가 화면에 출력됩니다.
동작 원리 정리
- partialFunction(multiply): multiply 함수를 감싼 내부 함수를 반환합니다.
- partialFunction(multiply)(22): 첫 번째 인수 22가 고정된 또 다른 함수를 반환합니다.
- partialFunction(multiply)(22)(33): 두 번째 인수 33까지 전달되어 최종적으로 multiply(22, 33), 즉 726이 계산됩니다.
이처럼 부분 함수를 활용하면 인수를 단계별로 나누어 전달할 수 있으며, 특정 값이 고정된 재사용 가능한 함수를 손쉽게 만들 수 있습니다.