비동기

• 한 번 비동기는 영원한 비동기이다
• 비동기는 동시의 문제가 아니고, 순서의 문제다

setTimeout(() => {
	console.log('a');
}, 0);

setTimeout(() => {
	console.log('b');
}, 1000);

setTimeout(() => {
	console.log('c');
}, 2000);

* 결과 : a, b, c

순서

• 호출 스택에 annonymouse가 쌓인다 => setTimeout(a)이 쌓인다 => 백그라운드에 setTimeout(a)에 비동기 함수가 쌓이고 호출스택에서는 사라진다 => setTimeout(b)이 쌓인다 => 백그라운드에 setTimeout(b)에 비동기 함수가 쌓이고 호출스택에서는 사라진다 => setTimeout(c)이 쌓인다 => 백그라운드에 setTimeout(c)에 비동기 함수가 쌓이고 호출스택에서는 사라진다 => annonymouse가 호출스택에서 사라진다 => 백그라운드에 있는 비동기 함수들이 테스크큐에 쌓인다 => 호출스택이 비어있으면 이벤트 루프를 통해 테스크큐에 있는 비동기함수를 하나씩 호출스택으로 이동시키고 실행 된다

그림으로 이해해 보자

• setTimeout함수가 차례대로 쌓이고, 백그라운드에 비동기함수를 쌓이게 한다
  2.
• setTimeout함수, annoymouse는 실행이 끝나면, 호출스택에서 사라진다
• 백그라운드에 있는 비동기 함수는 동시에 실행이 되고, 조건이 맞추어지면 차례대로 테스크큐에 "FIFO" 형식으로 쌓인다

• 이벤트 루프가 스택 호출이 비어있으면 테스크큐에 있는 함수를 하나씩 호출 스택으로 옮긴다
• 호출스택으로 옮겨진 함수는 "console.log('a');" 을 실행하고 사라진다

테스크큐

• 테스크큐는 마이크로큐와 매크로큐가 있다
• 마이크로큐에는 promise, process.nextTick이 담기고, 나머지는 매크로 큐에 담긴다
• 마이크로큐가 먼저 호출스택에 올라가고, 그다음 매크로 큐가 호출 스택에 올라간다
• 즉, 마이크로큐가 계속 꽉차있으면 매크로큐에 있는 함수는 호출스택에 올라가지 않는다