🤔 예시로 보는 비동기

promise, async await의 실행 순서를 이해하고자 작성하였다.

1. async await

async function start(n) {
  console.log('hi');

  const prom = new Promise((resolve) => {
    console.log(n);
    resolve('prom');
  });

  const prom2 = new Promise((resolve) => {
    console.log(n);
    resolve('prom2');
  });

  let a = await prom;
  let b = await prom2;

  console.log('end');

  return a + b;
}

start(1).then(console.log);

console.log('after');

최종 결과

hi
1
after
1
end
promprom2

하지만, 처음 나의 예상은 다음과 같았다.

hi
1
1
end
after
promprom2

가장 마지막 console.log('after')이 실행되기 전, start함수에 남아있는 실행을 마저 진행할 것이라고 예상했고, async의 console.log('end')가 실행될 것이라고 예상하였다.

하지만, await를 만나는 순간 start함수는 멈췄다.

내가 놓치고 있었던 부분은 뭘까??

---

내가 고민했던 부분을 시원하게 설명해 놓은 블로그를 발견했다.

비동기 실행 흐름 이해하기 (async/await)
비동기 실행 async/await 설명 원본(영어)

정리를 하자면 다음과 같다.

실행

1. start(1) 호출

2. console.log('hi') 실행, 출력 //-> hi 출력

3. prom() 호출

4. console.log(n) 실행, 출력 //-> 1 출력

5. Prom() Promise 리턴

6. await를 만났기 때문에, start(1)은 일시중단되고, MicroTake Queue로 이동시킴.

7. async함수에서 나와서, async함수를 호출한 실행 컨텍스트로 돌아가서 마저 실행. 위의 예시에서는 전역 컨텍스트로 돌아감.

8. console.log('after') 실행, 출력 //-> after 출력

9. 실행 컨텍스트에 task가 더 이상 없는 것을 확인하고 이벤트루프가 MicroTask Queue를 확인

10. async 함수인 start함수가 콜스택으로 옮겨지고, 이전에 중단된 곳에서 이어서 실행

11. 위의 과정을 반복

12. start의 Promise 리턴값을 받아 then실행

---

알게된 부분

이번 예시코드를 통해 알게된 사실은 await를 만나면 async함수는 중단되고 MicroTask Queue로 이동시킨다는 것이다.

MicroTask Queue로 이동한 후에 call stack이 비면, MicroTask queue는 하나씩 call stack으로 이동시켜 다시 실행시킨다.

때문에 나의 예상과는 다른 값이 출력된 것이었다.

---

아래 블로그는 비동기, 이벤트 루프를 이해하는데 정말 정말 정말 좋은 자료이다!

비동기 실행 async/await 설명 원본(영어)