[JS] 콜백함수(Callback Function)

콜백 함수란?

어떤 이벤트가 발생한 이후 수행되는 함수를 의미한다. 주로 비동기 실행의 결과값으로 반환되어 실행되는 함수를 의미한다.

function sum(x, y, callback){
    let res = x + y;
    callback(res);
}

//3, 4를 sum함수에서 더한 후 callback메서드로 * 2된 결과 출력
sum(3, 4, (res) => {
    let callbackRes = res * 2;
    console.log(callbackRes);
});

다음을 보면 sum()의 인자로 들어가는 callback은 함수이다. 연산이 끝난 후 인자로 들어온 함수를 실행시키는 것이다.

따라서 Argument Input값으로 함수를 넣어주며, 주로 익명 함수로 작성된다.

 

콜백함수는 Closure이다.

var obj = {
    value: "empty",

    //프로토타입 안에 함수선언
    setValue : function(value){
        this.value = value;
    }
}
 //obj.setValue를 콜백함수로 사용
function test(value, callback){
    console.log('test');
    callback(value);    //콜백함수가 선언될 때의 환경 this는 global window 객체
}
function test2(value, callback){
    console.log('test2');
    callback.call(obj, value);  //this객체를 obj라고 명시
}

test("value1", obj.setValue);   //obj.setValue를 콜백함수 인자로 사용
console.log(obj.value); //this는 global이엇으므로 obj는 안바뀜 : empty

test2("value2", obj.setValue);
console.log(obj.value); //this를 obj로 명시했으므로 obj의 값이 바뀜 : value2

 

콜백함수는 함수가 선언되었을 때의 환경을 기억한다. 

다음은 콜백함수가 호출되면 obj 객체의 value를 바꾸려는 코드들이다. 콜백함수는 현재 컨텍스트의 this.value의 값을 변화시킨다.

test()의 경우 호출되는 콜백함수가 바라보는 this는 글로벌 객체이다. 따라서 obj의 value는 바뀌지 않는다.

test2()의 경우에는 this가 obj라는것을 명시해주었다. 따라서 콜백함수에서 this.value는 obj의 value이다.

같은 프로토타입 안의 함수였는데 함수의 환경에 따라서 결과가 달라진다.

 

콜백 지옥

function add(x, callback){
    let sum = x + x;
    console.log(sum);
    callback(sum);
}

add(3, function(result){
    add(result, function(result2){
        add(result2, function(result3){
            add(result3, function(result4){
                console.log("fin")
            })//4) result3 + result3, callback으로 fin log 출력
        })//3) result2 + result2 (= result3), callback으로 4) 수행
    })//2) result + result  (= result2), callback으로 3) 수행
}) //1) 3 + 3 (= result), callback으로 2) 수행

이게 뭐하는 친구일까 ^^;;

콜백함수의 남용은 자칫 가독성의 저하의 우려가 있다. 다음 코드는 주석에 달린것 처럼 1) 2) 3) 4)의 과정으로 결과가 나오게 된다.

그런데 딱 봐도 코드가 참 보기 힘들다... 이게 콜백함수 안에 콜백함수가 있고 그안에 콜백함수가 있고...

그나마 위에꺼는 양반이다. 저 콜백함수들 사이사이에 다양한 비즈니스 로직들이 곁들여지면 매우 보기 힘들다.

이를 보완하기 위해서 Promise 문법을 도입했는데 다음 포스팅에서 살펴보자