JavaScript - 콜백 지옥 탈출

콜백 함수 (Callback function)

 

 

자바스크립트에서는 함수를 값으로 사용할 수 있다. 변수에 함수를 담을 수 있는게 이러한 이유 때문이다.

 

 

var sample = function() { console.log("I am a sample"); }

 

 

이렇게 함수를 변수에 담아 다른 함수의 인자로 전달하는것까지 가능하다. 전달된 함수를 호출하는것도 가능하다.

 

 

let shout = function() {
    console.log("아아아아아");
}

function sample(func) {
  func()
}

sample(shout)

 

 

샐행 결과

 

 

 

이처럼 함수를 값으로 삼아 다른 함수에 인자로 넘겨주는 함수를 콜백(Callback) 혹은 콜애프터 함수(Call-after function)이라 부른다

 

https://besforyou.tistory.com/274

 

 

콜백 지옥 (Callback Hell)

 

 

콜백 함수는 비동기처리에 자주 사용된다.

 

그런데 콜백 함수가 너무 많이 중첩된다면?

 

 

loadScript('1.js', function(error, script) {

  if (error) {
    handleError(error);
  } else {
    // ...
    loadScript('2.js', function(error, script) {
      if (error) {
        handleError(error);
      } else {
        // ...
        loadScript('3.js', function(error, script) {
          if (error) {
            handleError(error);
          } else {
            // ...continue after all scripts are loaded (*)
          }
        });

      }
    });
  }
});

 

 

이런식의 가독성 떨어지는 코드가 되어버린다. 이러한 코드는 수정하기도 어렵다.

 

 

콜백 지옥 탈출 방법

 

1. Promise

https://besforyou.tistory.com/230

JavaScript - Promise, Call back

 

2. async & await

https://besforyou.tistory.com/239

JavaScript - async, await

 

3. 콜백 함수 분리

 

위 코드에서 콜백 함수들을 아래와 같이 분리 가능하다.

 

loadScript('1.js', step1);

function step1(error, script) {
  if (error) {
    handleError(error);
  } else {
    // ...
    loadScript('2.js', step2);
  }
}

function step2(error, script) {
  if (error) {
    handleError(error);
  } else {
    // ...
    loadScript('3.js', step3);
  }
}

function step3(error, script) {
  if (error) {
    handleError(error);
  } else {
    // ...continue after all scripts are loaded (*)
  }
}

 

 

출처

https://javascript.info/callbacks