이 코드가 별것 아닌 것처럼 보일 수 있지만, 이 패턴으로 계속 진행하다 보면 가로로 점점 커져 가로로 중첩되어 가는 호출에 빠지게 됩니다. 이는 자바스크립트에서 콜백 지옥(callback hell)으로 알려져 있으며 유지 보수가 쉽고 합리적인 프로그램을 만들고 싶을 때 어떤 일이 있어도 피하고 싶은 디자인입니다. 단순히 미학을 넘어 별개의 비동기 작업을 동기화하는 일은 읽기 어려운 코드가 없어도 충분히 어렵습니다. 이 코드에는 또 다른 문제가 숨어 있습니다. 짐작이 가나요? 비동기 함수를 호출하는 for...of 명령형 블록과 같은 동기 코드를 섞으면 문제가 생깁니다. 루프는 이러한 호출에 지연 시간이 있음을 인식하지 못해서 무슨 일이 있든 항상 앞으로 진행하므로 예측할 수 없고 진단하기 어려운 버그가 생길 수 있습니다. 이러한 상황에서는 루프 대신 forEach()를 사용하여 비동기 함수 주변을 클로저로 만들어 문제를 개선할 수 있습니다.

ajax('<host1>'/items',
items => {
  items.forEach(item => { -- 배열의 forEach() 메서드는 중첩된 HTTP 호출로 데이터 객체의 범위를 적절히 지정합니다.
    ajax(`<host2>/items/${item.getId()}/info`,
      dataInfo => {
        ajax(`<host3>/files/${dataInfo.files}`,
          processFiles);
      });
  });
});

이게 바로 RxJS와 일반적으로 FP에서 모든 루프가 사실상 제거되는 이유라 볼 수 있습니다. 따라서 4장과 5장에서는 루프 대신 순수 함수를 활용하여 모든 데이터의 범위를 적절하게 유지하며 비동기 요청 시퀀스를 생성할 수 있는 연산자를 알아봅니다. 콜백을 사용하는 좋은 사례는 Node.js 이벤트 이미터(event emitter)³를 기반으로 API를 구현하는 겁니다.