JavaScript 에서 Callback Function 이란?

JavaScript 에서는 Callback Function를 아주 쉽게 구현할 수 있으며 매우 강력합니다.

가장 흔하게 Callback Function을 사용하는 AJAX 요청을 예를 들어 설명하겠습니다.

JQuery의 AJAX 요청 함수 중 하나인 $.getJSON을 통해 ajax 요청을 하고 그 응답을 function (data) { ... }을 통해 받아 옵니다.

var getSum = function() {
  $.getJSON("/ajax/getInfo", function(data) { ... });
};

예를 들어 이 getSum 함수를 호출하고 받은 data안에 있는 값의 합을 결과로 돌려받는 방법을 알아보겠습니다.

안 좋은 방법

Callback function을 안쓰는 안 좋은 방법은 대표적으로 setInterval을 이용하는 방법입니다.

var result;
var getSum = function() {
  $.getJSON("/ajax/getInfo", function(data) {
    result = data;
  });
};

getSum();
var checker = window.setInterval(function() {
  if (result) {
    clearInterval(checker);

    // 원하는 값을 출력
    console.log(result.dogs + result.cats);
  }
}, 1000);

이 방법의 문제점은 무식하게 1000ms마다 result가 data로 채워지는 것을 확인함으로써 ajax요청의 값을 얻을 수 있다는 점입니다.

물론 1000ms를 50ms로 줄이는 방법도 있겠지만 이렇게 하게 되면 쓸데없이 자주 체크하는 함수를 호출함으로써 JavaScript의 Event loop을 낭비하게 됩니다 (느려집니다).

좋은 방법

var result;
var getSum = function(callback) {
  $.getJSON("/ajax/getInfo", function(data) {
    if (typeof callback === "function") {
      callback(data);
    }
  });
};

getSum(function(data) {
  // 원하는 값을 출력
  console.log(data.dogs + data.cats);
});

이렇게 getSum 함수안의 parameter로 또 다른 함수(이게 Callback function) 를 넘겨줘서 원하는 타이밍에 이 함수를 불러줌으로써 깔끔하게 해결할 수 있습니다.

정리

예제에서 getSum을 부르면서 data라는 param안에 있는 dogs와 cats의 합을 콘솔에 찍는 함수를 getSum의 parameter로 넘겨주었습니다.

getSum 함수안에서는 비동기 작업인 ajax 요청이 끝나고 결과를 받는 시점에 이 callback 함수에 결과값을 넣어 불러줌으로써 알맞은 타이밍에 원하는 결과물을 처리할 수 있게 되었습니다.

또한 getSum의 parameter 값으로 함수가 아닌 것(?)을 넘겨주거나 아무것도 넘겨주지 않았을 때에는 getSum() 호출시에 에러가 발생할 수 있으므로, 간단히 callback의 타입을 체크함으로써 보다 에러를 방지할 수 있습니다.