출처: Node.js 교과서_제로초 1장

이벤트 루프
여러 이벤트가 동시에 발생했을 때 어떤 순서로 콜백 함수를 호출할지를 이벤트 루프가 판단합니다.

이벤트 루프 !!

자바스크립트로 먹고살거면 꼭 이해해라.

정의 : 이벤트 발생 시 호출할 콜백함수들을 관리
호출된 콜백함수의 실행순서를 결정하는 역할, 프로그램이 종료될 때까지 이벤트 처리를 반복하므로 loop라고 부름

구성 : 호출스택(Call stack) / background(대기/실행) / 태스크 큐(Task Queue = Callback Queue)

Call Stack : 함수는 실행되는 동안 호출 스택에 머물러 있다가 실행이 완료되면 호출 스택에서 지워짐

Background : setTimeout 같은 타이머나 이벤트 리스너들이 대기하는 곳, 자바스크립트가 아닌 다른언어로 작성된 프로그램이라고 봐도 무방, 여러 작업이 동시에 실행될 수 있음.

Task Queue : 이벤트 발생 후, 백그라운드에서 실행 시간까지 대기하고 처리할 타이밍이되면 태스크 큐로 타이머나 이벤트 리스너의 콜백함수를 보내고 대기열(task Queue)을 생성, 보통 완료된 순서대로 대기하지만 특정 경우 순서가 바뀜.

자바스크립트에서 함수 실행 순서

실행순서 :: 호출 스택 = Call stack

일반 함수 => 예측가능

function first() {
  second();
  console.log('첫 번째');
}
function second() {
  third();
  console.log('두 번째');
}
function third() {
  console.log('세 번째');
}
first();

비동기함수 : 이벤트 루프 없으면 설명 x

function run() { 
  console.log('3초 후 실행');
}
console.log('시작');
setTimeout(run, 3000);
 
console.log('끝');

<호출 스택>
1.전역 콘텍스트인 anonymous가 호출 스택
2.setTimeout이 호출 스택에 들어감
3.호출 스택 최상단의 setTimeout() 실행
4.타이머와 함께 run함수(콜백함수)는 백그라운드로 이동
5.setTimeout()은 호출 스택에서 삭제(실행완료)
6.anonymous 호출 스택에서 삭제(실행완료)

<백그라운드>
4-1.run함수 백그라운에서 3초대기(3000 밀리세컨드)
4-2.3초 후 run함수는 태스크 큐로 이동(작업완료 의미)

<태스크 큐>
6-1.이벤트 루프는 호출스택이 빈 경우(위 6번까지 모두 실행 완료 후) 정해진 규칙에 따라 콜백함수들을 태스크 큐로부터 호출스택으로 이동하고 실행

!!중요 : 호출 스택에 함수가 너무 많으면 setTimeout은 3초가 경과해도 run함수를 실행하지 않을 수 있다.