콜백 지옥 탈출 하기

콜백 지옥이란?

총체적 난국의 콜백함수

콜백 지옥(callback hell)은 콜백 함수를 익명 함수로 전달하는 과정이 반복되어 코드의 들여쓰기 수준이 감당하기 힘들정도로 깊어지는 현상을 얘기한다. 주로 이벤트 처리나 서버 통신과 같은 비동기적인 작업을 수행하기 위해 이런 형태가 자주 등장하는데, 가독성이 떨어지면서 코드를 수정하기 어렵다.

동기(synchronous)적 방식 : 현재 실행 중인 코드가 완료된 후 다음 코드를 실행 비동기(asynchronous)적 방식 : 현재 실행중인 코드의 완료 여부와 무관하게 즉시 다음 코드로 넘어가서 실행.

앱이 구동이 될 때, 비동기 통신이 수십번 일어나게 된다면 모든 결과를 콜백을 통해 처리하는데 그 떄 콜백 지옥에 빠질 수 있다. ES5에서 이를 코트로 작성 할 때 유틸리티 함수를 만들지 않는다면 콜백을 여러번 중첩하여 사용하는 이른바 콜백지옥에 빠지기 쉬웠다. 하지만 ES6에서 부터는 콜백 지옥으로 부터 해방시켜주는 Promise가 나왔고 더 나아가서는 Promise보다 더 간편하게 사용가능한 fetch가 나왔다.

func1(function (value1) {
  func2(value1, function (value2) {
    func3(value2, function (value3) {
      func4(value3, function (value4) {
        func5(value4, function (value5) {
          // ...
        });
      });
    });
  });
});

콜백 함수 예시

예시 1

비동기로 거듭 제곱 함수를 사용한 콜백 지옥이다.

콜백지옥

// 비동기(Async) 프로그래밍: 거듭 제곱 함수
function exponentiationAsync(x, n, cb) {
  n = n || 2;
  var o = [];
  while(n--) { o.push(x); }
  x = o.reduce(function(a,b){return a*b;});
  window.setTimeout((cb || function(){}), 1000, x);
}

// 2의 3승(거듭제곱) 값을 시작으로 1초 마다 
// 전달 받은 값을 3승(거듭제곱)하여 비동기 처리
// 비동기 프로그래밍 코드 결과: 콜백 지옥!!!!
exponentiationAsync(2, 3, function(x){
  exponentiationAsync(x, 3, function(x2){
    exponentiationAsync(x2, 3, function(x3){
      exponentiationAsync(x3, 3, function(x4){
        console.log(x4); // 4초 뒤에 2.4178516392292583e+24 출력
      });
    });
  });  
});

Promise로 개선

// Promise를 사용하여 exponentiationPromise 유틸리티 함수 개선
function exponentiationPromise(x, n=2, time=1000) {
  return new Promise((resolve, reject) => {
    window.setTimeout(() => {
      try {
        let o = Array.from(new Array(n), () => x);
        resolve( o.reduce((a,b) => a*b) );
      } catch(e) {
        reject(e);
      }
    }, time);
  });
}

// Promise를 사용한 비동기(Async) 프로그래밍
exponentiationPromise(2, 3)
  .then(x  => exponentiationPromise(x, 3))
  .then(x2 => exponentiationPromise(x2, 3))
  .then(x3 => exponentiationPromise(x3, 3))
  .then(x4 => console.log(x4)); 

  // 4초 뒤에 출력되는 결과 값: 2.4178516392292583e+24

콜백 지옥 탈출 방법

1. 기명 함수 사용하기

2. Promise 객체 사용하기

3. Async~await 사용하기

위와 같은 수평적인 형태의 코드를 Promise를 사용하면 수직적으로 보기 간편하게 바꿀 수 있다.

func1(value1)
  .then(func2)
  .then(func3)
  .then(func4)
  .then(func5, value5 => {
    // ...
  }

참고

https://velog.io/@yujo/JS%EC%BD%9C%EB%B0%B1-%EC%A7%80%EC%98%A5%EA%B3%BC-%EB%B9%84%EB%8F%99%EA%B8%B0-%EC%A0%9C%EC%96%B4velog.io