setTimeout 관찰(1) [JS: callstack, eventloop]

function sayHi() {
	console.log('hi');
}

setTimeout(sayHi, 1);

let i = 0;

while (i < 10) {
	console.log(i);
	i++;
}

console.log('last');

##결과
0
1
2
3
4
5
6
7
8
9
last
hi

1. setTimeout함수는 주어진 시간(여기서는 1ms)뒤에 함수를 실행 시켜주는데 수많은 console.log가 실행중일 때 그 사이에 sayHi가 끼어들어갈 수 있을까?

2. 결과: setTimeout에 의해 실행되는 sayHi는 주어진 시간이 되더라도 호출스택이 비워지지 않는 이상 실행되지 않는다.(혹시 1ms가 되기전에 10개의 숫자가 나오는게 아닌가 싶어서 반복문의 갯수를 10000개로 해도 결과는 똑같았다.)

setTimeout의 작동원리

위 코드를 바탕으로 예를 들자면 처음에 setTimout이 콜스택에 올라가고 sayHi가 백그라운드에 올라갔다가 주어진 시간(1ms)에 도달하면 Task queue(or callback queue)으로 가게 된다. 이벤트 루프는 방금 말한 백그라운드, task queue와 같은 공간의 개념이라기 보다는 동작의 개념인데 2가지 역할을 수행한다.

1. 콜스택이 비어있는지 확인한다.
2. Task queue에 처리해야 할 task가 있는지 확인한다.

위 코드에서는 call stack의 console.log들이 call stack에서 전부다 처리되고 task queue에 sayHi가 올라와야지만 이벤트루프가 해당 태스크를 call stack으로 가게 해준다.
다시 말해 1번과 2번이 모두 성립해야만 sayHi가 실행될 수 있다.

결론: setTimeout에 매우 짧은 시간으로 설정했을 때 콜스택이 비어있지 않아도 sayHi함수가 console.log(i)사이를 비집고 들어갈 수 있을까?
아니다. call stack이 비어있어야지만 sayHi가 실행된다.

이벤트루프 동작 시각화 사이트