JS - 콜백함수

콜백함수

한산한 카페에 방문한 손님이 직원에게 커피를 요청하면 직원이 요청받은 대로 음료를 제조하여 손님에게 전달해 줄 것이다. 그럼 손님은 요청에 대한 결과물인 커피를 받는다.

그런데 바쁜 카페라면 어떨까? 예를들어 강남 한복판에 있는 스타벅스에 그것도 점심 이후에 방문했다면?? 손님은 한산한 카페에서 했듯이 원하는 커피를 요청할 것이다. 그런데 직원이 1명밖에 없다면 해당 요청에 대해서 제조하고 다시 손님께 응답하여 전달하기까지 한산한 카페에 비해 시간이 상당히 걸릴 것이다.

그렇기에 이러한 경우, 한명이 한번에 요청을 받고 각 고객에게는 호출기를 전달한 뒤, 음료 제조가 완료되면 이번에는 점원이 나를 호출함으로써 고객은 요청에 대한 결과값이 커피를 전달받을 수 있다.

이 때, 점원이 나를 호출하는 프로세스가 시스템관점에서의 "콜백"과 유사하다.

콜백 함수 기본 표현식

function order(callback) {
  callback();
}

여기서 전달인자 callback은 C++이나 C에서 말하는 함수 포인터이다.

이벤트 리스너와 콜백함수

• 특정 이벤트가 발생 시, 해당 이벤트를 처리해주는 루틴이 바로 이벤트 핸들러이면서 콜백 함수 인 것

이벤트 핸들러의 콜백 함수 관점

이벤트 리스너 = 콜백함수
addEventListener(이벤트명, 콜백함수, 옵션)

이러한 과정을 "콜백함수를 등록하는" 과정이라고 한다.

const order1Btn = document.getElementById("order1");
const order2Btn = document.getElementById("order2");

const orderHandler1 = function () {
  alert("피자를 주문했습니다.");
};

const orderHandler2 = function () {
  alert("치킨을 주문했습니다.");
};

order1Btn.onclick = orderHandler1;
order2Btn.addEventListener("click", orderHandler2);

코드로 예시를 들어서 보면, order1Btn.onclick을 통해서 등록을 하는 방법이나 order2.Btn.addEventListener('click', orderHandler2)로 등록하는 방법이나 결과상의 차이는 없다.
다만, 이전에도 언급했듯이, addEventListener를 이용하면 여러개의 이벤트를 하나의 이벤트에 등록할 수 있다.