[ECMAScript6+를 위한 보충학습] 2. Callback

콜백함수(Callback Function)란?

파라미터로 함수를 전달받아, 함수의 내부에서 실행하는 함수이다. 함수를 파라미터로 만들어 전달하는 경우는 대부분 비동기 프로그래밍 방식으로 코드를 만들 때이다. 예를 들어 더하기 함수를 실행한 후 결과 값이 반환될 때까지 기다리지 않고 그 다음 코드를 실행하려면 비동기 방식으로 코드를 만들어야 한다. 즉, 더하기 함수를 실행하는 데 시간이 걸릴 수 있기 때문에 그 다음 코드를 바로 실행한다. 그리고 나서 연산이 끝났을 때 파라미터로 전달한 함수가 실행될 수 있다면 그 시점에 결과를 처리할 수 있으므로 효율적인 프로그램을 만들 수 있다. 이때 파라미터로 전달되는 함수를 콜백함수(Callback Function)라고 한다. 콜백함수는 함수가 실행되는 중간에 호출되어 상태 정보를 전달하거나 결과 값을 처리하는 데 사용된다.

 

콜백 함수 예시 코드

function add(a, b, callback){
    var result = a + b;
    callback(result);
}

add(10, 10, function(result){
    console.log('파라미터로 전달된 콜백 함수 호출');
    console.log('더하기 (10, 10)의 결과 : %d', result);
});

  

더하기 함수를 정의할 때는 더 이상 값을 반환하지 않도록 return 키워드를 사용하는 코드 부분을 삭제한다. 그 대신 더하기 연산을 한 결과 값은 파라미터로 전달된 콜백함수를 호출하면서 그 콜백함수로 전달한다. 콜백함수는 미리 변수에 할당해 두었다가 add() 함수를 호출할 때 파라미터로 전달할 수도 있지만, add() 함수를 호출할 때 익명 함수로 만들어서 파라미터로 바로 전달할 수도 있다. 콜백함수는 더하기 연산을 하는 코드 아래에서 호출되는데 이때 콘솔에 메시지를 출력한다.

 

함수 안에서 값을 반환할 때 새로운 함수를 만들어 반환하는 방법 예시 코드

function multiply(a, b, callback){
    var result = a*b;
    callback(result);

    var history = function(){
        return a + '*' + b + '=' + result
    }
    return history
}

var multi_history = multiply(10, 10, function(result){
    console.log(result);
});

console.log('결과 값으로 받은 함수 실행 결과 : ' + multi_history());

 

> 100
> 결과 값으로 받은 함수 실행 결과 : 10*10=100

 

콜백함수 사용 시 this 객체에 유의

var obj = {
    name: "Rudy",
    email: "empty",
    setEmail : function(email){
        this.email = email;
    }
}

function setEmail_function(email, callback){
    callback(email);
}

setEmail_function("example.com", obj.setEmail);
console.log(obj.email);
console.log(window.email);

 

obj 변수에 있는 setEmail 함수는 email을 인자로 받아 obj 객체의 email 프로퍼티 값을 바꾸는 함수이다. setEmail 함수에서는 obj 객체를 참조할 목적으로 this.email = email 코드가 있다. 위의 예제를 실행하면, 과연 email 프로퍼티 값이 바뀌었을까?

 

setEmail_function() 함수를 실행할 때, 두 번째 인자(callback() 함수)에 obj.setEmail 함수를 전달했다. 즉, example.com 이라는 값으로 obj.email 프로퍼티 값이 바뀌기를 기대하고 실행한 것이다. 그러나 setEmail_function() 함수 내에서 콜백함수 setEmail 함수가 실행될 때, this는 전역 객체인 window가 된다. 따라서 첫 번째 출력 결과는 'empty'이며, 두 번째 출력 결과는 example.com가 된다.

 

이와 같은 문제를 해결하기 위해서는 call, apply 메서드를 사용하여 this객체를 명확히 하는 방법이 있다.

 

var obj = {
    name: "Rudy",
    email: "empty",
    setEmail : function(email){
        this.email = email;
    }
}

function setEmail_fucntion(email, callback){
    callback.call(obj, email);
}

callback("example.com", obj.setEmail);
console.log(obj.email);
console.log(window.email);

 

setEmail_function() 함수에서 콜백 함수(callback)를 호출할 때, call() 함수를 사용하여 this 객체를 obj라고 명확히 전달했다. 따라서 이 예제에서는 첫 번째 출력 결과는 example.com이 되고, 두 번째 출력 결과는 undefined가 된다.

 

이와 같이 콜백함수를 작성할 때는 this에 주의해야 한다.