javascript_in_depth_13

디자인 패턴 실용 - 콜백 패턴

자바스크립트는 함수 기반으로 동작하기 때문에 이벤트 기반으로 동작하는 부분들은 콜백 함수를 통해서 다양하게 동작하고 있다. 특히 자바스크립트는 변수나 인자로 함수를 쉽게 설정하고 전달할 수 있어서 더 쉽게 콜백 함수를 활용할 수 있다.

활용

콜백 함수의 대표적인 사용처는 바로 이벤트 핸들러이지만, 일반적인 자바스크립트 처리 로직 중에서도 이러한 콜백 패턴을 일용해서 해당 함수의 호출이 끝나고 난 뒤에 처리할 수 있도록 활용할 수 있다. 특히 하나의 공통 라이브러리를 이용할 때 콜백 함수를 넘겨주는 것은 라이브러리의 확장성을 높일 수 있다.
콜백 함수가 겹치면 소스를 읽는 것 자체가 불가능할 정도로 복잡해지므로 적당하게 함수명을 따로 분리해서 소스를 정리하는것이 콜백 패턴에서 주의할 점이다.

예제

// XMLHttpRequest와 콜백 패턴 활용
(function () {
    function ajax(method, url, data, callback) {
        var xhr = new XMLHttpRequest();
        xhr.open(method, url);
        xhr.onload = function () {
            if (xhr.status === 200) {
                callback.call(this, xhr.responseText);
            }
        }
        xhr.send(data);
    }
    ajax("POST", "/login", "id=hello&password=world", function (responseText) {
        if (responseText === "Success") {
            alert("Success to login!");
            ajax("GET", "/userInfo", "id=hello", displayUserInfo);
        } else {
            alert("Failed to login");
        }
    });

    function displayUserInfo(responseText) {
        document.getElementById("userInfo").innerHTML = responseText;
    }

}());