자바스크립트에서 함수는 객체입니다. 그래서 함수를 값처럼 다룰 수 있으며, 다른 함수의 매개변수(인자)로 전달하는 것이 가능합니다. 이렇게 전달된 함수는 나중에 전달받은 함수 내부에서 호출되는데, 이때 전달된 함수를 콜백 함수(Callback Function)라고 부릅니다.
콜백은 자바스크립트의 비동기 처리, 이벤트 핸들링, 배열 메서드(map, filter 등)에서 폭넓게 활용되는 핵심 개념입니다.
콜백 함수의 기본 원리
콜백의 동작 방식을 간단히 정리하면 다음과 같습니다.
- 함수 A를 호출할 때 함수 B를 인자로 넘깁니다.
- 함수 A는 자신의 로직 실행 중 적절한 시점에 넘겨받은 함수 B를 호출(call back)합니다.
- 이처럼 '나중에 호출될 함수'가 바로 콜백 함수입니다.
예제 코드
아래 예제는 두 숫자를 더하는 add 함수에 콜백 함수를 전달하고, 연산 결과를 받아 화면에 출력하는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
</style>
</head>
<body>
<h1>JavaScript Callback Example</h1>
<p class="sample"></p>
<button class="btn">CLICK HERE</button>
<h3>
위 버튼을 클릭하면 add 함수가 실행되고,
add 함수 내부에서 다른 함수(콜백)가 호출됩니다.
</h3>
<script>
// 세 번째 매개변수 callback으로 함수를 전달받음
function add(a, b, callback) {
callback(a + b);
}
// 결과값을 받아 2배로 곱해 화면에 출력하는 콜백 함수
function multiplyResultByTwo(res) {
document.querySelector(".sample").innerHTML = res * 2;
}
// 버튼 클릭 시 add 함수에 multiplyResultByTwo를 콜백으로 전달
document.querySelector(".btn").addEventListener("click", () => {
add(4, 5, multiplyResultByTwo);
});
</script>
</body>
</html>실행 결과
위 코드를 브라우저에서 실행하면 버튼과 안내 문구가 표시됩니다.
'CLICK HERE' 버튼 클릭 후
버튼을 클릭하면 add(4, 5)가 실행되어 결과값 9가 계산되고, 콜백 함수 multiplyResultByTwo가 이 값을 받아 2배인 18을 화면에 출력합니다.
정리
이 예제에서 확인할 수 있듯이, 콜백 함수는 함수 간의 유연한 협업을 가능하게 해줍니다. 특히 비동기 작업(타이머, 서버 요청, 이벤트 처리 등)에서 '작업이 끝난 후 실행할 동작'을 지정할 때 필수적으로 사용되므로, 자바스크립트를 깊이 있게 학습하기 위해 반드시 익혀야 할 개념입니다.