콜백 지옥(기명 함수)

🤔 콜백 지옥이란?

👉 비동기 작업을 처리할 때 콜백 함수를 연속적으로 사용하면서 발생하는 문제를 가리킨다

👉 예를 들어, 웹사이트에서 데이터를 서버로부터 불러오는 작업이 있을 때, 데이터가 성공적으로 불러와진 후에 실행할 로직을 콜백 함수로 정의하고, 이를 데이터를 불러오는 함수에 인자로 전달한다. 그런데, 이런 콜백 함수가 중첩되어 사용되면, 즉 콜백 함수 안에 또 다른 콜백 함수가 있고, 그 안에 또 다른 콜백 함수가 있는 경우에 코드가 복잡해지고 가독성이 떨어져 문제가 될 수 있다. 이를 콜백 지옥이라고 부른다. 

콜백 함수란?(지난 포스팅 참고)

콜백 함수

 

👉 비동기는 동기의 반대말이다. 동기적인 코드는 현재 실행 중인 코드가 완료된 후에야 다음 코드를 실행하는데, 비동기는 실행 중인 코드의 완료 여부와 무관하게 즉시 다음 코드로 넘어간다. 

👉 CPU의 계산에 의해 즉시 처리가 가능한 대부분의 코드(변수 할당, 산술 연산 등)는 동기적인 코드이다. 

👉 반면 사용자의 요청에 의해 특정 시간이 경과되기 전까지 어떤 함수의 실행을 보류한다거나(setTimeout), 사용자의 직접적인 개입이 있을 때 비로소 어떤 함수를 실행하도록 대기한다거나(addEventListener), 웹브라우저 자체가 아닌 별도의 대상에 무언가를 요청하고 그에 대한 응답이 왔을 때 비로소 어떤 함수를 실행하도록 대기하는 등(XMLHttpRequest)

👉 별도의 요청, 실행 대기, 보류 등과 관련된 코드는 비동기적인 코드이다. 

 

👉 콜백 지옥 예시

setTimeout((name) => {
    let coffeeList = name;
    console.log(coffeeList);
    
    setTimeout((name) => {
       coffeeList += ', ' + name;
       console.log(coffeeList);
       
       setTimeout((name) => {
           coffeeList += ', ' + name;
           console.log(coffeeList);
           
           setTimeout((name) => {
              coffeeList += ', ' + name;
              console.log(coffeeList);
  
           }, 500, "카페라떼"); 
       
       }, 500, "카페모카");
    
    }, 500, "아메리카노");

}, 500, "에스프레소");

//실행 결과
// 에스프레소
// 에스프레소, 아메리카노
// 에스프레소, 아메리카노, 카페모카
// 에스프레소, 아메리카노, 카페모카, 카페라떼

👉 예제 4-12는 0.5초 주기마다 커피 목록을 수집하고 출력한다. 각 콜백은 커피 이름을 전달하고 목록에 이름을 추가한다. 목적 달성에는 지장이 없지만 과도한 들여쓰기로 값이 전달되는 순서가 아래에서 위로 향하고 있어 어색하게 느껴진다. 

 

👉 콜백 지옥 해결(이름을 가진 함수로 전환)

let coffeeList = "";

const addEspresso = (name) => {
   coffeeList = name;
   console.log(coffeeList);
   setTimeout(addAmericano, 500, "아메리카노");
};

const addAmericano = (name) => {
   coffeeList += ", " + name;
   coffeeList = name;
   console.log(coffeeList);
   setTimeout(addMocha, 500, "카페모카");
};

const addMocha = (name) => {
   coffeeList += ", " + name;
   coffeeList = name;
   console.log(coffeeList);
   setTimeout(addLatte, 500, "카페라떼");
};

const addLatte = (name) => {
   coffeeList += ", " + name;
   coffeeList = name;
   console.log(coffeeList);
};

setTimeout(addEspresso, 500, "에스프레소");


// 실행결과
// 에스프레소
// 아메리카노
// 카페모카
// 카페라떼

👉 이렇게하면 가독성을 높일뿐 아니라 함수 선언과 함수 호출만 구분할 수 있다면 위에서부터 아래로 순서대로 읽어내려가는 데 어려움이 없다. 

👉 그러나 일회성 함수를 전부 변수에 할당하는 것도 좀 그럴 수 있다. 그래서 다음 시간에는 더욱 나은 장치인 promise, async/await에 대해서 더 자세하게 살펴보겠다.