콜백 함수(callback function)는 인수로 다른 함수에 전달된 함수로서, 어떤 종류의 루틴이나 동작을 완료하기 위해 외부 함수 내부에서 호출된다. 자바스크립트에서는 함수 역시 객체이므로 다른 함수의 인자로 전달할 수 있다.
다른 함수에서 실행될 수 있도록 다른 함수에 인수로 전달되는 함수를 뜻한다. 만약 다른 함수의 반환 후 바로 함수를 실행하고 싶다면 콜백을 사용할 수 있다.
필요한 이유
자바스크립트는 코드를 하향식 순서로 순차적으로 실행한다. 하지만 코드가 다른 일이 발생한 후에 실행되어야 하는 경우가 있을 수 있다. 이를 비동기 프로그래밍(Asynchronous Programming)이라고 한다. 이런 Asynchronous Programming의 경우에 콜백 함수를 사용한다.
예시 1. Timer 이벤트가 발생한 후에 콜백 함수가 실행
const message = function(){
console.log("This message is shown after 3 seconds");
}
setTimeout(message, 3000);
---
이렇게도 쓸 수 있다.
setTimeout(function() {
console.log("This message is shown after 3 seconds");
}, 3000};
setTimeout() 함수가 실행되고 난 뒤 message() 콜백 함수는 백그라운드로 보내진다. 그 후 3초가 지난 후 백그라운드에서 콜백 큐로 보내지게 되고, 콜 스택이 비어있는 것을 이벤트 루프가 확인한 후에 이벤트 루프가 message() 콜백 함수를 콜 스택에 Push한다.
예시 2. 버튼을 누르는 이벤트가 발생할 때 이에 대응하는 콜백 함수가 실행
<button id="callback-btn">Click Me!</button>
window.onload = function () {
document.querySelector("#callback-btn"). addEventListener("click", function(){ // callback
console.log("User has clicked on the button");
});
}
저기 보이는 Anonymous function이 바로 콜백 함수이다. 버튼이 눌리는 이벤트가 발생하면 백그라운드에서 해당 function이 callback queue로 전달된다. 그 후 이벤트 루프가 call stack이 비어 있는지 판단한 다음 해당 function을 call stack에 push한다.
이벤트가 발생한 후 백그라운드가 이벤트가 발생한 후 실행해야 할 callback 함수를 Callback Queue에 추가한다.