[Javascript Callback & Promise]

Cabllback

자바스크립트는 기본적으로 싱글스레드 이기때문에 병렬처리를 할 수없어 기존의 병렬처리가 필요했던 작업들을 "asynchronous non-blocking I/O model"이라는 방식을 통해 해결하고 있다. 언어 자체로는 병렬처리가 불가능하지만 엔진에서 I/O 관련 작업들을 내부적으로 병렬처리를 하게 된다.

function myCallback() {
      const aaa = new XMLHttpRequest();
      aaa.open("get", "http://numbersapi.com/random?min=1&max=200");
      aaa.send();
      aaa.addEventListener("load", (res) => {
            console.log("데이터가 로드시 실행.");
            console.log(res);
            const num = res.target.response.split(" ")[0];

            const ddd = new XMLHttpRequest();
            ddd.open("get", `http://koreanjson.com/posts/${num}`);
            ddd.send();
            ddd.addEventListener("load", (res) => {
                  console.log("두번째 실행");
                  console.log(JSON.parse(res.target.response));
                  const userId = JSON.parse(res.target.response).UserId;

                  const ccc = new XMLHttpRequest();
                  ccc.open(
                        "get",
                        `http://koreanjson.com/posts?userId=${userId}`
                  );
                  ccc.send();
                  ccc.addEventListener("load", (res) => {
                        console.log("마지막 실행");
                        console.log(res.target.response);
                  });
            });
      });
}

점점 코드가 안쪽으로 들여쓰기가 되는 것을 볼 수 있다. 이를 콜백지옥이라 부르고 구글링에 callback hell이라 검색하면 아래와같은 이미지가 검색될정도로 개발자들 사이에서는 핫한 주제이다.

[출처 : https://adrianalonso.es/desarrollo-web/apis/trabajando-con-promises-pagination-promise-chain/]

Promise

기본적으로 callback과 하는 일은 같지만 Promise는 작업이 끝난 후에 실행 할 함수를 가져오는것이 아니라.then() 활용한다. then() 함수는 새로운 promise를 반환한다. 처음에 만들었던 promise와는 다른 새로운 promise 이다.

function add20(a) {
  return new Promise(resolve => setTimeout(() => resolve(a + 20), 200));
} 

add20(20)
  .then(add20) <--- 이런식으로 자체 method인 .then을 통해서 처리할수있다. 
  .then(add20)
  .then(add20)
  .then((res) => console.log(res))

callback 함수와는 비교도 되지 않을만큼 코드가 간결해졌지만 해당코드를 실행시켜보면 Promise { } , 100 이라는 결과값이 나오게된다. 이는 then 메서드의 비동기성떄문에 발생하는 코드이다. 기본적으로 동기적으로 실행하면서 실행되자마자 기다리지 못하고 바로 시작되기 때문에 pending 이라는 값이 반환되는것이다. Promise 만 가지고는 비동기를 완벽하게 구현 할 수 없다. 그래서 추가된 기능이 async await이다. async await는 다른 색션에서 다룰 예정이다.