[Interview] setTimeout가 0초일 때 어떤일이 일어날까?

굉장히 당황한 질문이면서, 기본기에 대한 너무 날카로운 질문중 하나였다. setTimeOut에 대해 알고있는 지식에 대해 알고있다고 넘어가버린 경우가 꽤 있다.

console.log('1')
console.log('2')
console.log('3')
setTimeout(() => console.log('4'), 0)
console.log('5')
console.log('6')

이렇게 하면 0초니까 자연스럽게 4가 들어갈줄 알았는데,

답은 다음과 같았다.

오잉.. 왜 setTimeout 0초로 실행한 코드는 마지막으로 빠졌을까?

JavaScript는 싱글 스레드 언어며, 하나의 싱글 콜 스택만을 가지고 있고, 자바스크립트의 엔진은 한 번에 하나의 태스크만 실행할 수 있다.

요청하는 태스크 순서대로 하나 씩 처리하는 동기처리 방식에 따라 움직이고,
실제 렌더링 되는건 여러 동작을 동시 다발적으로 처리하는 것 처럼 보이지만,
이러한 동시성을 가능하게 하는원리는 이벤트 루프라고 볼 수 있다.

이벤트 루프는 매번 순회하면서 콜 스택을 체크하는 과정을 거친다. 이것이 Tick이라고 하는데 틱이 발생하면 큐에 쌓여 있는 이벤트를 꺼내어 실행하며,

실제 setTimeout이 0초인것은 0초로 작동하는 보장된 시간이 아니라 요청을 처리하는 최소의 시간으로 이벤트 태스크 큐로 동작해 콜스택이 처리 되었을때 뒷 순서로 움직인다.

setTimeOut 0초는 콜스택에서 오래 걸릴거 같은 작업이 있을때, 해당 방법으로 지연시켜 태스크를 분산시키는 방안도 검토할 수 있다. 사실 현업에서 이런부분에 대해서는 유지보수 측면이나 렌더 성능을 올릴 수 있는 방면으로도 직결될 수 있다. 이미지나 애니메이션이 잦으면 큐에 따라 많이 달라질 수 있겠다는 생각도 들었다.