JavaScript 콜백 함수에 매개변수 전달하기
콜백 함수(callback function)는 다른 함수의 인자로 전달되어 특정 시점에 호출되는 함수를 의미합니다. 콜백 함수에 매개변수를 전달하려면, 콜백 함수 자체와 함께 필요한 값을 외부(상위) 함수의 인자로 넘겨주고, 외부 함수 내부에서 그 값을 이용해 콜백을 실행하면 됩니다.
다음은 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: 20px;
font-weight: 500;
color: blueviolet;
}
</style>
</head>
<body>
<h1>Passing parameters to callback functions</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to pass parameter to callback function add2 and call it</h3>
<script>
let resEle = document.querySelector(".result");
function add2(a) {
return a + 2;
}
function multiply9(fn, num) {
return fn(num) * 9;
}
document.querySelector(".Btn").addEventListener("click", () => {
resEle.innerHTML = "The number returned = " + multiply9(add2, 8);
});
</script>
</body>
</html>
실행 결과
'CLICK HERE' 버튼을 클릭하면 아래와 같은 결과가 화면에 출력됩니다.
코드 설명
위 예제의 동작 원리를 살펴보겠습니다.
add2(a) 함수: 전달받은 숫자에 2를 더한 값을 반환하는 콜백 함수입니다.
multiply9(fn, num) 함수: 두 개의 매개변수를 받습니다. 첫 번째 fn은 콜백 함수이고, 두 번째 num은 콜백에 전달할 값입니다. 함수 내부에서 fn(num)으로 콜백을 실행한 뒤, 그 결과에 9를 곱하여 반환합니다.
버튼을 클릭하면 multiply9(add2, 8)이 호출됩니다. 이때 add2 함수가 콜백으로 전달되고, 내부적으로 add2(8)이 실행되어 10을 반환합니다. 최종적으로 10 × 9 = 90이라는 결과가 화면에 표시됩니다.
이처럼 콜백 함수와 매개변수를 함께 전달하면, 하나의 외부 함수를 다양한 콜백과 조합해 재사용할 수 있어 코드의 유연성과 가독성이 크게 향상됩니다.