기본적인 동작 원리를 그림으로 표현하면 이렇게 표현할 수 있다.
함수를 동기 호출하게 되면 call stack에 차곡차곡 쌓여 순차적으로 실행된다.
이 때 만약에 우리가 AJAX나 setTimeout 혹은 DOM event 함수를 실행하면
자바스크립트 엔진은 call stack에서 Web APIs로 보내고 정해진 시간 혹은
이벤트가 발생한 순간에 순차적으로 callback queue에 적재한다.
callback queue에 줄을 선 함수들은 call stack에 쌓여있던 것들이 모두 제거되어 깨끗해지면
차례대로 스택에 쌓여서 실행되게 된다.
위에서 아래로 쭉 실행하며 스택에 쌓임
비동기 콜인 setTimeout 은 web APIs에서 처리되고, 처리되고 나면 task queue에 쌓이고
main 함수를 다 실행하고 스택이 비어있게 되면
task queue에 있던게 stack으로 들어가서 실행됨
이는 setTimeout의 초를 0초로 두더라도 다르지 않음을 알 수 있다.
그 이유는 task queue에 줄 서 있는 callback 함수들은 stack이 비어있을 때만 stack으로 이동할 수 있기 때문이다.
위 경우 setTimeout으로 설정한 cb 함수는 web APIs로 이동하는 즉시 task queue로 이동하게 되는데,
stack이 비어있지 않기 때문에 대기 상태로 있게 되고 console.log(3)이 출력되고 스택이 클리어되면 이동하여 console.log(2)가 실행된다.