JavaScript 콜백 함수의 활용

JavaScript 에서는 콜백 함수를 아주 쉽게 구현할 수 있고

아주 강력합니다.

특히 AJAX요청과 함께 사용하면 정말 강력한데요.

예를 들어, AJAX요청을 해서 어떤 정보를 가져와

그 가져온 정보로 무엇인가를 처리해주고 싶습니다.

하지만 AJAX특성상 서버의 응답도 영향이 있기 때문에

같은 요청도 같은 컴퓨터일지라도 네트워크 환경 등 여러가지 변수 때문에 반응 속도가 천차만별입니다.

따라서 setTimeout 을 이용한다거나 여러가지 다른 방법도 있겠지만

보다 확실한 방법은 콜백 함수를 이용하는 방법입니다.

콜백함수를 이용하게 되면

"어, 나 이 작업 다 끝났으니까 뭐 할 꺼 있으면 해"

라고 메시지를 전달함으로써 확실히 가져온 데이터를 가지고 처리를 할 수 있게 됩니다.

이제 예제 소스를 보여드리겠습니다.

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

getSum(function(sum) {
    alert( sum );
});

이렇게 해주게 되면 getSum이란 함수를 호출했을 때 ajax 로 값을 가져와 어떤 값들을 처리해서 그 결과값을

콜백 함수로 보내줄 수도 있고 딱히 콜백함수를 통해 보내주는 parameter가 없더라도 콜백함수를 호출해

순차적으로 일을 처리할 수 있게 됩니다. 

저 같은 경우에는 Google Maps JavaScript SDK 를 할 때 많이 유용하네요.

또 여러가지 제가 정의한 함수들끼리 데이터 처리를 할 때 어떤 함수의 처리가 반드시 어떤 함수의 처리보다

선행되어야 한다거나 그런 경우에 많이 유용한 것 같네요.