[javascript] 비동기 작업 / 콜백 지옥(CallBackHell)

콜백 지옥 이란?? 

function taskA(a, b, cb) {
  setTimeout(() => {
    const res = a + b;
    cb(res);
  }, 2000);
}

function taskB(a, cb) {
  setTimeout(() => {
    const res = a * 2;
    cb(res);
  }, 2000);
}

function taskC(a, cb) {
  setTimeout(() => {
    const res = a * -1;
    cb(res);
  }, 2000);
}

taskA(1, 2, (res_a) => {
  taskB(res_a, (res_b) => {
    taskC(res_b, (res_c) => {
      console.log("taskC Result : ", res_c);
    });
  });
});

 

다음과 같이 콜백 함수의 콜백 함수의 콜백 함수를 넣어서 비동기 처리의 결과를 또 다른 비동기 처리의 매개변수로 전달 할 수 가 있다. 

 

콜백 함수는 주로 이벤트 처리나 서버 통신과 같은 비동기 작업을 제어 하기 위해 사용되지만 콜백 함수를 반복 해서 사용하게 되면, 들여 쓰기 수준이 감당할 수 없을 정도록 깊어지게 된다.

 

이렇게, 콜백함수를 여러개 사용하게 되는 상황을 콜백 지옥(CallBack Hell) 이라고 부르고,

이러한 코드 구조는 가독성이 떨어지고 코드 수정을 어렵게 하는 문제를 야기한다.

 

따라서 이러한 콜백 지옥을 탈출 하기 위한 방법 중 하나로 자바스크립트에서 제공하는 Promise 객체를 이용한다.

 

참고

 

 

https://espania.tistory.com/339

[javascript] 비동기 작업 / Call Back 함수란 무엇인가??