[Javascript] Callback

Callback이란?

Callback은 비동기 로직 처리 후의 동작 될 함수를 뜻합니다.  이후 실행 할 함수를 매개 변수로 전달하여 비동기 동작이 끝난 후 실행할 수 있습니다. 아래 Callback 사용에 대한 예제입니다.

 

function task1(a, cb) {
  setTimeout(() => {
    cb(a+1);
  }, 2000);
}

function task2(a, cb) {
  setTimeout(() => {
    cb(a+1);
  }, 2000);
}

function task3(a, cb) {
  setTimeout(() => {
    cb(a+1);
  }, 2000);
}

task1(1, (a) => {
console.log("task1 : ", a);
  
    task2(a, (b) => {
    console.log("task2 : ", b);

        task3(b, (c) => {
        console.log("task3 : ", c);
        });
    });
});

task1부터 task3까지 차래대로 호출하며 두번째 전달인자는 익명함수를 전달하여 setTimeout(비동기 처리)이후 첫번째 전달인자를 +1 시키고 전달받은 익명함수에 다시a+1의 결과와 함께 다음 익명함수를 전달하고 있습니다. 설정한 2초 (2000ms) 단위로 console.log가 찍힐 것 입니다. 현재까지는 가독성에 크게 문제가 없는 상황입니다.

 

2.  Callback + try Catch

function callback1(closer) {
    closer(function (success) {
        try {
            if (success) {
                console.log('2')
            } else {
                throw '에러 테스트';
            }
        } catch (error) {
            console.log(error)
        }
    })
}

callback1(function (catchable) {
    setTimeout(function () {
        catchable(false);
    }, 1000);
});

비동기 처리 사용 시 성공/실패에 대한 에러 처리 시 사용하는 기능으로 try catch 구문을 사용합니다. 상기 예제는 callback1() 호출 시 callback function을 넘겨주고, closer 내의 success가 다시 catchable로 전달이 되어 동작되는 형식입니다. 

 

3. Callback 지옥

1번 예제보다 훨씬 더 잦은 Callback 처리를 나열 하다보면 가독성이 심각하게 떨어지는 경우가 발생하는데 이를  '콜백지옥' 이라고 부르기도 하죠.

//함수 정의
function step1(callback) { 
	... //비동기 처리
    callback(); 
};

function step2(callback) { 
	... //비동기 처리
    callback(); 
};

.....

//함수호출 시 전달..전달.. 전달......
step1(function (value1) {
    step2(function (value2) {
        step3(function (value3) {
            step4(function (value4) {
                step5(function (value5) {
                    step6(function (value6) {
                        // Do something with value6
                    });
                });
            });
        });
    });
});

예제와 같이 콜백지옥은 가독성이 떨어지기 때문에 ES6의 Promise 객체를 이용한 콜백지옥 해결방법에 대해서 다음 게시글에서 추가로 다뤄보겠습니다.