이벤트 루프를 이해한 대로 정리했습니다.
틀린 부분 지적 부탁드립니다!

🔁 이벤트 루프

이벤트 루프는 Single Thread 언어라고 불리는 자바스크립트에서 동시성을 가능하게 하는 기능입니다. 이벤트 루프를 이해하기 위해선 자바스크립트 엔진과 브라우저 환경을 먼저 이해해야 합니다.

자바스크립트 엔진 구성과 브라우저 환경

Javascript 엔진

Javascript 코드를 실행하는 프로그램입니다. ( Google 크롬 같은 경우 V8 엔진 )

✔️ 힙 스택

지역 변수, 매개 변수와 같은 메모리 할당이 일어나는 영역

✔️ 콜 스택

실행될 코드의 한 줄 단위로 할당되는 영역입니다. 함수가 호출되면 순차적으로 콜 스택에 쌓이고, LIFO 형식으로 실행됩니다. Single Thread의 특징으로 호출된 함수가 실행이 끝나야 다음 코드로 넘어갈 수 있습니다.

하나의 함수가 호출되었을 때 내부 함수까지 콜 스택에 쌓이게 되고, 실행 컨텍스트에 의해 나중에 쌓인 코드부터 차례로 실행됩니다. (LIFO)

브라우저 환경

✔️ Web API

브라우저에서 제공하는 API입니다. 주로 AJAX, DOM 조작 이벤트, setTimeout과 같은 비동기 기능을 제공합니다.

✔️ 이벤트 큐(=콜백 큐)

Web API에 있는 비동기 코드의 호출 조건이 만족되었을 때 비동기 코드의 콜백 함수를 큐 방식으로 쌓는 공간입니다.

호출 조건이 만족되었을 때
setTimeout 지정 시간이 지났다거나, 특정 이벤트 핸들러의 이벤트가 발생하였을 때

✔️ 이벤트 루프

이벤트 루프는 위에서 설명한 이벤트 큐에 콜백 함수가 들어왔을 때, 콜 스택으로 넘길지 안 넘길지 감시합니다.
콜백 함수를 넘기는 조건은 콜 스택이 완전히 비워져있을 때입니다.

🎯 자바스크립트 동작 원리

위에서 정리한 개념들을 토대로 자바스크립트 동작 원리를 다음 코드를 통해 알아보겠습니다.

코드 예제

다음 스크립트 실행 결과는 2 -> 5 -> 5 -> 5 -> 4 -> 1 -> 3 입니다.

1️⃣ setTimeout(function () {
  console.log("1");
}, 0);

2️⃣ console.log("2");

3️⃣ for (let i = 0; i < 3; ++i) {
  loop();
}

4️⃣ setTimeout(function () {
  console.log("3");
}, 0);

5️⃣ console.log("4");

3️⃣function loop() {
  console.log("5");
}

코드 분석

0. 스크립트를 실행하면 코드를 가지고 있는 전역 컨텍스트 main()이 콜 스택에 쌓입니다.

1. 비동기 코드가 호출되면, 콜 스택에 쌓인 후 Web API로 이동합니다. 여기서 setTimeout이 지연시간이 0초이므로 곧바로 이벤트 큐로 콜백 함수가 넘어가지만, 아직 콜 스택에 main()이 쌓여있어 콜 스택으로 이동할 수 없습니다.

   이벤트 큐의 콜백 함수는 콜 스택이 비워져야 이벤트 루프가 이동시킨다.

   

2. 다음으로 console.log("2")가 콜 스택에 쌓이고 곧바로 출력되고 콜 스택에서 빠져나옵니다.

3. 반복문을 통해 loop() 함수가 호출됩니다. loop() 함수가 호출되고 loop() 함수의 내용인 console.log("5")가 한 번에 쌓이게 됩니다. 다 쌓인 후 실행 컨텍스트의 원리에 따라 나중에 쌓인 코드가 먼저 실행되면서 호출이 끝나게 됩니다.
   

4. 1번과 마찬가지로 이벤트 큐에 쌓이고 대기합니다.
   

5. 2번과 마찬가지로 곧바로 출력되고 더 이상 실행할 코드가 없어 main() 함수가 실행되고 콜 스택이 비워지게 됩니다.

6. 이제 콜 스택이 비워졌다면 이벤트 루프에 의해 이벤트 큐에 있는 콜백 함수가 먼저 들어온 순서대로 콜 스택에 전달됩니다.
   이때도 역시 먼저 전달된 콜백 함수가 실행되어 콜 스택이 비워지게 된다면 뒤에 있던 콜백 함수도 이벤트 루프에 의해 콜 스택으로 전달됩니다.