setTimeout(() => {
console.log("2000ms")
}, 2000);
setTimeout(() => {
console.log("100ms")
}, 100);
console.log("Done");
왜 Done → 2000ms → 100ms가 아님?
자바스크립트는 싱글 스레드 언어이다. 하지만 블로킹 방식으로 모든 코드를 처리하면 처리시간이 오래 걸리는 작업을 수행했을 때, 후행 작업들이 밀리기 때문에 이러한 작업들은 대체로 비동기적으로 처리하여 논블로킹 방식으로 처리한다.
위에 예시 코드를 처음 보면 처음 setTimeout(2000)이 콜스택으로 들어간 다음 ‘어 너는 Web APIs 잖아?’ 하며 Web APIs 쪽으로 보낸다.
이후 setTimeout(100)또한 ‘너도 Web APIs잖아?' 하며 마찬가지로 Web APIs로 보낸다.
setTimeout(2000)과 setTimeout(100)은 콜스택에 진입 후 빠져나갔으므로 console.log("Done") 이 콜스택으로 들어간 후 콘솔로 빠져나가게 된다.
여기서 궁금한 점은 setTimeout(2000)이 먼저 Web APIs로 진입하고 setTimeout(100)은 나중에 진입했는데 왜 setTimeout(100) 가 먼저 Task Queue로 진입한 후 콜스택 → 콘솔로 빠져나가냐는 것이다.
자바스크립트 런타임은 싱글 스레드지만 Web APIs는 브라우저에서 제공하는 것으로 JavaScript 엔진의 싱글 스레드에 제한을 받지 않는 멀티 스레드이기 때문이다.
결론적으로 각각의 API는 독립적으로 작동할 수 있어 여러 작업을 동시에 수행할 수 있기때문에 setTimeout(100)이 우선 작업을 끝냈기 때문에
Web APIs → Task Queue → EventLoop === “비어있음” ? “콜스택 진입" : "대기하셈" → console출력
과정을 먼저 거치게 되는 것이다.
결론
setTimeout(2000) → Call Stack 진입 → Web APIs 등록 → Call Stack에서 제거
setTimeout(100) → Call Stack 진입 → Web APIs 등록 → Call Stack에서 제거
console.log("Done") → Call Stack 진입 → Call Stack에서 제거 → console 로 빠져나옴
setTimeout(100) → Task Queue 진입 → Call Stack 진입 → Call Stack에서 제거 → console 로 빠져나옴
setTimeout(2000) → Task Queue 진입 → Call Stack 진입 → Call Stack에서 제거 → console 로 빠져나옴
