[Javascript] 콜백 지옥

콜백 지옥, callback hell, 콜백지옥, pyramid of doom, JavaScript callback hell, JS callback hell

• 콜백 지옥 (callback hell) 또는 둠 피라미드 (pyramid of doom): 순차 의존이 있는 비동기 작업을 콜백 으로 연결할 때 들여쓰기가 오른쪽으로 깊어지는 현상.
• 가독성 문제가 가장 먼저 보이지만, 더 큰 문제는 에러 처리 다. 매 단계마다 if (err) return 을 빠뜨리면 그대로 무시되고, try/catch 도 통하지 않는다.

// 콜백 지옥의 전형
loadUser(42, (err, user) => {
  if (err) return console.error(err);
  loadPosts(user.id, (err, posts) => {
    if (err) return console.error(err);
    loadComments(posts[0].id, (err, comments) => {
      if (err) return console.error(err);
      loadProfile(comments[0].authorId, (err, profile) => {
        if (err) return console.error(err);
        console.log(profile.name);
      });
    });
  });
});

해결

• Promise + 체이닝: .then 의 평탄한 흐름으로 펴기
• async/await: 동기 코드처럼 작성

try {
  const user = await loadUser(42);
  const posts = await loadPosts(user.id);
  const comments = await loadComments(posts[0].id);
  const profile = await loadProfile(comments[0].authorId);
  console.log(profile.name);
} catch (err) {
  console.error(err);
}

참고

• 콜백
• Promise
• async/await
• 비동기와 타이밍, 콜백부터 async/await까지의 발전사