JavaScript 에서 Callback Function 이란?

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

callback

가장 흔하게 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);
});