Promise 코드의 실행 결과

setTimeout(() => {
    console.log('1')
    
    setTimeout(() => {console.log('2')} )

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

Promise.resolve().then(() => {
    console.log('5')
    
    setTimeout(() => {console.log('6')} )

    Promise.resolve().then(()=> console.log('7'))
    
    console.log('8')
})

console.log('9')

9,1,4,2,3,5,8,6,7을 예상했지만
9,5,8,7,1,4,3,6,2 순서였다

이벤트루트는 이러한 과정으로 태스크를 처리하는데

• 동기 코드 순차적으로 처리
• 마이크로태스크 큐의 모든 태스크 처리(큐 비워질 때까지)
• 매크로태스트 큐에서 하나의 태스크 가져와 처리
• 다시 1번 돌아감

구체적인 과정을 살펴보면
전역 실행 컨텍스트 내 동기 코드인 9가 가장 먼저 실행
이후 실행 컨텍스트의 Promise.then() 핸들러가 마이크로태스크 큐에서 처리되며 내부의 동기 코드가 실행되어 5,8이 실행

이어서 동일 Promise.then() 핸들러 내부의 Promise.then() 핸들러가 마이크로 태스트 큐에서 처리되어 7이 실행됨

다음 첫번째 setTimeout() 콜백이 매크로태스크 큐에서 처리되어 내부의 동기 코드가 순차 실행되어 1 4가 출력

그 후 동일 setTimeout() 콜백 내부의 Promise.then()이 마이크로테스크 큐에서 처리되어 3 출력

이어 남은 매크로태스크 중 먼저 등록된 6이 출력 이후 2 출력