[JavaScript] Callback Function ( 콜백함수 )

콜백함수(Callback Function)란 코드를 통해 명시적으로 호출하는 함수가 아니라, 함수를 등록해 놓으면 어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출하는 함수를 말한다.

 

콜백함수는 사용자 이벤트 처리나( Event Handler ) 네트워크 응답 처리 등의 비동기적 처리를 요할 때 사용된다.

 

콜백함수의 사용 예다.

 

- 다른함수의 파라미터로 전달

function hello(callback) {
    callback("hi");
}

function callbackFunc(msg) {
    console.log(msg);
}

hello(callbackFunc);

 

- Event Handler 등록

const btnElement = document.querySelector("#buttonTest");

function OnBtnClicked() {
    console.log("btn clicked !");
}

btnElement.addEventListener("click", OnBtnClicked);

 

- setTimeout 등록

function OnCallbackFunc(msg) {
    console.log(`called ! : ${msg}`);
}

setTimeout(OnCallbackFunc, 3000, "after 3 seconds"); // 3초 후 OnCallbackFunc 함수 호출하며 매개변수로 "after 3 seconds" 전달.