자바스크립트 비동기 함수와 콜백 헬 (Asynchronous Functions and Callback Hell)

09 Sep 2023

javascript

자바스크립트는 단일 스레드 언어이기 때문에, 비동기 함수를 통해 긴 작업을 수행하는 동안 다른 작업을 처리할 수 있습니다. 이로 인해 사용자 경험을 향상시키고 응답 시간을 단축시킬 수 있습니다. 그러나 비동기 함수를 사용하는 것은 콜백 헬이라고 알려진 문제를 야기할 수 있습니다.

콜백 헬 (Callback Hell)

콜백 헬은 비동기 함수의 중첩된 콜백 함수로 인해 코드가 복잡해지고 가독성이 떨어지는 상황을 묘사하는 용어입니다. 다음은 콜백 헬의 예시입니다.

asyncFunction1(function() {
  // 비동기 작업1
  asyncFunction2(function() {
    // 비동기 작업2
    asyncFunction3(function() {
      // 비동기 작업3
      asyncFunction4(function() {
        // 비동기 작업4
        asyncFunction5(function() {
          // 비동기 작업5
          // ...
        });
      });
    });
  });
});

이런 코드 구조는 가독성이 떨어지며 유지 관리하기 어렵습니다. 비동기 함수가 많아질수록 중첩된 콜백 함수로 인해 코드가 더 복잡해집니다. 이를 해결하기 위해 자바스크립트에서는 다양한 방식을 제공합니다.

Promise

Promise는 비동기 작업을 좀 더 구조화하고 가독성을 높이기 위해 등장한 개념입니다. Promise는 성공 또는 실패를 나타내는 결과를 나중에 처리할 수 있는 객체입니다. Promise는 다음과 같은 방식으로 작성됩니다.

asyncFunction1()
  .then(function() {
    // 비동기 작업1
    return asyncFunction2();
  })
  .then(function() {
    // 비동기 작업2
    return asyncFunction3();
  })
  .then(function() {
    // 비동기 작업3
    return asyncFunction4();
  })
  .then(function() {
    // 비동기 작업4
    return asyncFunction5();
  })
  .then(function() {
    // 비동기 작업5
    // ...
  })
  .catch(function(error) {
    // 에러 처리
  });

Promise를 사용하면 비동기 작업의 순차적인 실행이 가능해집니다. .then() 메서드를 사용하여 다음 작업을 정의하고, .catch() 메서드를 사용하여 에러 처리를 할 수 있습니다.

async/await

ES2017부터 async/await 문법이 도입되어 비동기 함수를 더 쉽게 작성할 수 있게 되었습니다. async/await는 Promise를 기반으로 하고 있으며, 코드를 동기적으로 작성하는 것처럼 보이게 만들어줍니다.

async function doAsyncTasks() {
  try {
    await asyncFunction1();
    // 비동기 작업1

    await asyncFunction2();
    // 비동기 작업2

    await asyncFunction3();
    // 비동기 작업3

    await asyncFunction4();
    // 비동기 작업4

    await asyncFunction5();
    // 비동기 작업5

    // ...
  } catch (error) {
    // 에러 처리
  }
}

doAsyncTasks();

async/await를 사용하면 코드가 순차적이고 동기적으로 작성되어 가독성이 향상됩니다. try-catch 문을 사용하여 에러 처리가 가능합니다.

결론

자바스크립트에서는 비동기 함수를 사용하여 응답 시간을 최적화할 수 있습니다. 그러나 비동기 함수 중첩으로 인한 콜백 헬은 가독성을 떨어뜨리고 유지 관리를 어렵게 만듭니다. Promise와 async/await를 사용하면 비동기 코드를 구조화하고 가독성을 높일 수 있습니다. 이를 통해 효율적으로 비동기 함수를 작성하고 유지할 수 있습니다.