콜백 함수(Callback Function)란?
콜백 함수란 다른 함수의 인수(argument)로 전달되는 함수를 의미합니다. 함수를 전달받은 쪽은 자신의 로직을 수행한 뒤, 적절한 시점에 전달받은 함수를 호출(call back, 되호출)하게 됩니다.
JavaScript는 단일 스레드(single thread)로 동작하기 때문에 타이머, 서버 요청처럼 시간이 걸리는 작업을 만나면 코드 실행 흐름을 멈추지 않고 다음 코드를 먼저 처리해야 합니다. 이때 "작업이 완료된 후 실행할 코드"를 콜백 함수로 넘겨주는 것이며, 이것이 콜백이 비동기(asynchronous) 처리의 핵심 도구로 사용되는 이유입니다.
예제 코드
아래 코드를 직접 실행해 보면 콜백 함수의 동작 방식을 쉽게 이해할 수 있습니다.
<html>
<head>
<script>
var callback = function(myCallback) {
setTimeout(function() {
myCallback();
}, 5000);
};
document.write("First is displayed");
document.write("<br>Second is displayed");
callback(function() {
document.write("This is Callback function");
});
document.write("<br>Last is displayed");
</script>
</head>
</html>
실행 결과 분석
위 코드의 출력 순서는 다음과 같습니다.
- First is displayed
- Second is displayed
- Last is displayed
- (5초 후) This is Callback function
흥미로운 점은 callback() 함수가 호출된 위치보다 "Last is displayed"가 먼저 화면에 표시된다는 것입니다. 그 이유는 콜백 함수 내부의 setTimeout이 5초(5000밀리초) 뒤에 실행되도록 설정되어 있기 때문입니다.
JavaScript 엔진은 setTimeout 작업을 대기열에 넣어두고 나머지 코드를 즉시 실행합니다. 그리고 5초가 지난 후에야 전달받은 콜백 함수(myCallback)를 호출하여 마지막 문장을 출력합니다. 이처럼 콜백 함수는 코드의 실행 순서를 제어하고, 긴 작업이 끝난 시점에 원하는 로직을 실행할 수 있게 해주는 JavaScript 비동기 프로그래밍의 기본 원리입니다.