[Javascript] 콜백함수(Callback function)

콜백함수 정의를 찾아봤다.

 

콜백(Callback)이란 옵저버(Observer) 디자인 패턴에서 나온 개념으로 객체의 상태 변화(이벤트)가 발생하였을 경우에 이러한 사실을 함수를 통해 전달하게 되는데, 이를 콜백 함수라고 합니다.

콜백함수는 javascript 특히, ajax나 jQuery를 사용할 때, 알게 모르게 많이 사용하고 계셨을 것입니다.

$("#myButton").on("click",function () {
    // 콜백 함수
});
 
$.ajax({
    url :"URL",
    type:"GET",
    success:function () {
        // 콜백 함수
    },
    error:function () {
        // 콜백 함수
    },
    complete:function () {
        // 콜백 함수
    }
});

출처: https://beomy.tistory.com/10 [beomy]

 

function square(x, callbackFnc) {
    setTimeout(callbackFnc, 100, x*x);
}
     
square(2,function(number) {
    console.log(number);
});

위 코드에서 square를 호출할 때, 2번째 인자로 function(obj)을 콜백함수로 넘겼다.

 

 

콜백함수에도 클로저 개념이 사용된다.

function callbackFunction (callback) {
    callback();
}
 
function testFunction() {
    var text ="callback function is closure";
    callbackFunction(function () {
        console.log(text);
    });
}
 
testFunction();

 testFunction()에서 callbackFunction의 콜백함수가 실핼될 때, text변수는 존재하지 않고,이전에 캡쳐된 text가 출력된다.