JavaScript는 싱글 스레드로 동작함

따라서 한 번에 여러 작업을 해야 할 때는, WebAPI의 힘을 빌림 WebAPI란 브라우저와 Node.js가 제공하는 기능들의 집합을 말함

(공식 용어는 아니고, 기능들의 느슨한 집합을 통칭함, 각자 제공하는 영역이 다를 수 있음)

자바스크립트 이벤트 루프 도식

이벤트 루프란?

Call Stack이 비었는지 계속 확인하면서, 비었다면 Callback Queue에서 작업을 꺼내 실행하는 무한 루프

동작 과정 예시

console.log("1");

setTimeout(() => {
  console.log("2");
}, 0);

console.log("3");

1. 콘솔에 “1” 출력

   Call Stack: [console.log("1")]
   출력: "1"
   Call Stack: []
   
   Event Loop: "아직 코드 실행이 끝나지 않아 대기"
   

2. setTimeout 만남

   Call Stack: [setTimeout(...)]
      ↓
   WebAPIs로 넘김: 타이머 시작 (0ms)
      ↓
   Call Stack: [] (setTimeout은 즉시 제거)
      ↓
   WebAPI는 별도 스레드이고, 0ms이므로 즉시 타이머 종료
   Callback Queue에 추가: [() => console.log("2")]
   
   Event Loop: "아직 코드 실행이 끝나지 않아 대기"
   

3. 콘솔에 “3” 출력

   Call Stack: [console.log("3")]
   출력: "3"
   Call Stack: []
   
   Event Loop: "코드 실행이 끝났으므로 확인"
   Event Loop: "Call Stack 비었네? Queue 확인 -> 있네! 동기 코드 실행 끝났으니 가져오자"
   

4. 이벤트 루프 작동

   Event Loop: "Callstack Queue 에 있는 작업 실행!"
      ↓
   Callback Queue: [() => console.log("2")]
      ↓
   Call Stack으로 이동: [() => console.log("2")]
      ↓
   출력: "2"
   

실행 결과

1
3
2