[JS] 콜백 함수와 콜백 지옥

콜백 함수란?

콜백 함수는 어떤 함수에 인자로 전달되어, 해당 함수의 내부에서 실행되는 함수를 말한다. 콜백 함수는 주로 비동기 작업이 완료된 후에 결과를 처리하거나, 이벤트가 발생했을 때 추가적인 작업을 수행하는 데 사용된다.

const numbers = [1, 2, 3];
const doubled = numbers.map(function(num) {
  return num * 2;
});
console.log(doubled); // 출력: [2, 4, 6]

해당 부분에서 function(num) {} 부분이 바로 콜백 함수이다. map이라는 메소드 안에서 실행되는 함수기 때문에 콜백 함수가 된다. 또다른 예제를 보자.

fetch('https://api.example.com/data')
.then(function(response) {
    return response.json();
})
.then(function(data) {
    console.log(data);
});

네트워크 요청이 완료된 후 데이터를 처리하기 위해 위와 같은 형태로 사용한다.
fetch 함수는 웹 API로부터 데이터를 가져오는 비동기 작업을 수행한다.
fetch함수가 성공적으로 완료되었을 때 then메소드가 실행되고 안에는 그 때 실행될 콜백 함수가 존재한다.
한 번은 response값을 json형태로 변환하고 두 번째로 데이터를 로그로 찍는다.

콜백 지옥

콜백 지옥이란 비동기 프로그래밍에서 콜백 함수를 연속적으로 중첩하여 사용할 때 발생하는 문제를 가리키는 용어이다. 이런 상황은 코드의 가독성을 떨어뜨리고, 에러 처리가 복잡해지며, 디버깅도 어렵게 만든다.

getData(function(a){
    getMoreData(a, function(b){
        getMoreData(b, function(c){ 
            getMoreData(c, function(d){ 
                getMoreData(d, function(e){ 
                    // ...
                });
            });
        });
    });
});

여러개의 각각의 함수는 작업 완료 후에 다음 작업을 수행하기 위한 콜백 함수를 인자로 받는다.
이런 식으로 콜백이 계속 중첩되면 들여쓰기가 깊어져서 코드가 읽기 어려워지게 된다.

콜백 지옥을 해결하려면?

• async/await로 해결하기

async function processData() {
    const a = await getData();
    const b = await getMoreData(a);
    const c = await getMoreData(b);
    const d = await getMoreData(c);
    const e = await getMoreData(d);
}

async/await 구문을 사용하면 비동기 처리 로직을 마치 동기 처리처럼 순차적으로 작성할 수 있으므로 코드가 훨씬 깔끔해지고 이해하기 쉬워진다.

• Promise를 사용하여 해결하기

getData()
.then(a => getMoreData(a))
.then(b => getMoreData(b))
.then(c => getMoreData(c))
.then(d => getMoreData(d))
.catch(error => console.error(error));

getData와 getMoreData 함수들은 각각 Promise를 반환한다고 가정했을 때,
이렇게 되면 .then 메소드를 사용하여 비동기 작업의 결과를 순차적으로 처리할 수 있게된다.
Promise 체인을 사용하면 중첩된 콜백 구조 대신 선형적인 구조로 코드를 작성할 수 있으므로, 코드의 가독성이 크게 향상된다.