[jquery] 콜백함수 란? Call-back function

콜백함수란?

파라미터로 함수를 전달하는 함수이다. 전달받은 함수를 함수의 내부에서 실행시킨다. 

예) jQuery에서 사용하는 콜백함수.

$("#btn_1").click( function() {

alert("Btn 1 clicked");

} );

예제와 같이 click 함수의 인자로 함수 자체( function( ~~~ ){} )를 전달하고 있다. 

이 함수는 click 함수가 실행되면 동작한다. 위와 같은 형태가 가장 전형적인 자바스크립트 콜백 함수이다. 또다른 전형적인 예제를 보자.

var friends = ["Hena", "Rex", "Ryan", "Paula" ] ;

friends.forEach(function (eachName, index) {

console.log (index + 1 + ". " + eachName ); // 1. Hena

});

forEach함수 안에 익명의 함수를 넣어서 forEach 구문 내에서 동작을 하게 하고 있다.

이 익숙한 예제 구문을 보면서 그동안 심지어 직접 사용하면서도 이게 콜백함수라는 걸 몰랐다는 것에 놀랐다. 그럼 실제 콜백함수가 어떤식으로 동작하는지 보자.

콜백함수는 어떻게 동작하는가 ?

자바스크립트에서 모든것은 객체다. 심지어 함수도 객체이다. 

그래서 우리는 함수를 변수처럼, 그리고 다른 함수의 리턴값으로 사용이 가능하게 된다. 함수를 콜백으로 다른 함수의 인자처럼 사용 할 경우에는 오직 함수의 정의만을 넘겨주면 된다.

즉, 함수의 이름만 넘겨주면 된다. 굳이 함수라고 끝에 () 괄호를 붙여 줄 필요도 없다. 다음과 같은 형태이다

setInterval(callback, 1000)  // setInterval함수의 인자인 callback자체가 함수이다.

예제와 같이 함수의 인자로 전달된 함수의 경우에는 언제든, 원하는 시점에 실행시킬 수 있다.

중요한 것은 콜백함수는 전달받은 즉시 바로 실행될 필요가 없다는 것이다. 

함수의 이름처럼 "call back", 함수의 내부 어느 특정 시점에 실행을 한다. 

맨처음 jQuery 예제처럼,

$("#btn_1").click( function() {

alert("Btn 1 clicked");

} );

이 익명의 함수는 click이라는 함수의 내부에서 나중에 호출이 된다. 아무런 이름이 없지만 이 함수를 담고있는 click 이라는 함수는 언제든지 이 함수를 호출할 수가 있다.

다중 콜백함수 

우리는 여러개의 콜백함수를 파라매터로 전달할 수 있다. 다음 예제코드는 전형적인 jQuery의 ajax함수들이다.

function successCallback(){

// do stuff before send

}

function successCallback(){

// do stuff if success message received

}

function completeCallback() {

//do stuff upon completion

}

function errorCallback(){

//do stuff of error received

}

$.ajax({

url:"http://www.bit.ly/hyesue_lee",

success:successCallback,

complete: completeCallback,

error: errorCallback

});