자바스크립트는 싱글스레드 입니다.

그래서 하나의 일을 할 때 하나밖에 못하는데 만약 그 하나의 일이 오래 걸리는 일이면 어떻게 될까요? 그 하나의 일이 오래 걸리기에 다른 작업들은 그 하나의 일이 끝날때 까지 기다려야 합니다.

=> 이러한 문제점을 해결하기 위해서 비동기로 어떠한 일을 수행하게 됩니다.

만약 비동기 요청이 여러 개 있을 때

하나의 요청이 다른 요청의 결과에 의존한다면?

아래의 소스코드에서 처럼 둘 다 비동기 요청을 보내는데 두 번째 요청이 첫 번째 요청의 결과가 필요할 수가 있다. 하지만 둘 다 병렬적으로 요청을 보내기 때문에 response1을 가지기 전에 두 번째 요청이 보내지게 됩니다.

이런 부분은 어떻게 처리해줘야 할까요?

// 1st request
const response1 = request("<http://abc.com>");

// 2nd request
const response2 = request("<http://bcd.com>", response1);

위와 같은 문제를 해결하는 세가지 방법

Callback 함수, Promise, Async Await 을 이용하는 세가지 방법이 있습니다.

콜백 함수

콜백 함수는 특정 함수에 매개변수로 전달된 함수를 의미합니다.

그리고 그 콜백 함수는 함수를 전달받은 함수 안에서 호출됩니다.

function firstFunction(parameters, callback) {
  // do something
  const response1 = request(`http://abc.com?id=${parameters.id}`);
  callback(response1);
}

function secondFunction(response1, callback) {
  const response2 = request(`http://bcd.com`, response1);
  callback();
}

firstFunction(params, function (response1) {
  secondFunction(response1, function () {
    thirdFunction(params, function () {
      // ...
    });
  });
});

콜백 사용의 단점

1. 위에서 볼 수 있듯이 소스 코드를 보는데 가독성이 떨어집니다.

2. 에러 처리를 한다면 모든 callback에서 각각 에러 핸들링을 해주어야 합니다.