Javascript에서 호출스택(callstack)과 태스크 큐의 관계는 무엇인가요?

면접관 :

Javascript에서 호출스택(callstack)과 태스크 큐의 관계는 무엇인가요?

 

면접자 : 

호출 스택(콜 스택)은 코드를 실행하면서 수행할 코드를 쌓고 메모리 힙에서 필요한 것들을 찾아 수행하는 공간입니다.

참고로 메모리 힙은 변수, 함수 저장 등 작업이 발생하는 공간입니다. 비동기 함수를 실행시키면  호출 함수는 콜 스택에 쌓여 차례로 실행되고 콜백 함수는 특정영역에 쌓이게 되는데 이 영역이 태스크 큐입니다. 태스크 큐는 이런 태스크들이 적재되는 공간입니다. 콜 스택에 있는 작업이 실행되면서 이벤트 루프는 계속 콜 스택이 비어있는지 체크를 합니다. 이벤트 루프가 콜 스택이 비어있다는 걸 확인하게 되면 비로소 태스크 큐에 있던 작업들이 콜 스택으로 옮겨진 후 차례로 실행되게 됩니다.

 

---

참조
setTimeout(foo, 0)에서 foo는 정말 0ms 후에 실행될까?

 

추가적으로 아래 블로그에 정리가 정말 잘 되어 있습니다.

[JavaScript] Task Queue말고 다른 큐가 더 있다고? (MicroTask Queue, Animation Frames)