JavaScript에서 헷갈리는 Promise, setTimeout 실행 순서를 알아보겠습니다!
JavaScript에서의 비동기 실행 순서 정복하기
Call Stack이 비었다면Microtask Queue에서 모든 작업을 꺼내 실행Task Queue(Macrotask Queue)의 가장 오래된 작업을 하나 꺼내 실행- 다시 1번 동작을 실행
연습해보기
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
console.log("stack [1]");
setTimeout(() => console.log("macro [2]"), 0);
setTimeout(() => console.log("macro [3]"), 1);
const p = Promise.resolve();
for (let i = 0; i < 3; i++)
p.then(() => {
setTimeout(() => {
console.log("stack [4]");
setTimeout(() => console.log("macro [5]"), 0);
p.then(() => console.log("micro [6]"));
}, 0);
console.log("stack [7]");
});
console.log("macro [8]");
위 코드가 실행되면, 어떻게 출력될까요?
정답은 아래에 있습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
stack [1]
macro [8]
stack [7], stack [7], stack [7]
macro [2]
macro [3]
stack [4]
micro [6]
stack [4]
micro [6]
stack [4]
micro [6]
macro [5], macro [5], macro [5]
참고
JavaScript Visualized: Event Loop, Web APIs, (Micro)task Queue
Difference between microtask and macrotask within an event loop context