[Deep Dive CS- Q2] - 실행결과

Q2. 해당 부분에 대한 매커니즘을 이해했다면, 아래의 실행결과를 작성하고, 그렇게 생각하는 이유에 대해서 설명해주세요.

console.log('1');

setTimeout(() => console.log('2'), 0);

Promise.resolve().then(() => console.log('3'));

async function test() {
  console.log('4');
  await Promise.resolve();
  console.log('5');
}

test();

console.log('6');

 

1. 콜스택에 console.log('1')을 담고, 출력 => 출력 : 1

2. setTimeout() 콜스택에 담고, Web API 호출 -> Task Queue에 담김
3. Promise.~ 콜스택에 담고, 엔진이 비동기 처리를 위해 Microtask Queue에 등록 -> Microtask Queue 담김

4. test() 함수 콜스택에 담아 실행 => 출력 : 4 , await~ Web API 호출 -> Microtask Queue 담김
5. console.log('6') 콜스택에 담고 실행 => 출력 : 6

6. 콜스택이 모두 비었음으로 우선순위가 가장 높은 Microtask Queue 먼저 탐색 => 출력 : 3 5

7. 그 다음 순위 Task Queue 탐색 => 출력 : 2

 

최종 결과 : 1 4 6 3 5 2

 

+ setTimeout은 브라우저(Web API)가 담당하지만, Promise는 자바스크립트 엔진(V8)이 직접 관리하는 Native 객체입니다. (Web API를 거치지 않고 엔진 내부에서 바로 Microtask Queue로 들어갑니다.)