이벤트 루프(Event Loop)

자바스크립트 동작 원리, 이벤트 루프(Event Loop)

• 자바스크립트에서 비동기 동작을 위한 것으로,
  이벤트 루프가 존재한다.

---

브라우저 내부 구성요소

이벤트 루프

• Call Stack이 다 비워지면, Callback Queue에 있는 함수를
  하나씩 Call Stack으로 옮긴다.
• 비동기 함수들을 적절하게 실행하도록 돕는다.

Call Stack

• 코드 실행을 위해 저장하는 메모리 구조
• 함수 호출을 하면, 이곳에 기본적으로 저장된다.
• 스택이므로, LIFO(Last In-First Out)으로 동작한다.

Web API

• 브라우저에서 제공하는 API 모음
• Call Stack에서 실행되는 비동기 함수를 처리한다.
• AJAX 호출, 타이머 함수, DOM 조작 등이 있다.

Callback Queue

• 비동기적 작업이 완료되면 실행되는 함수들이 대기하는 곳이다.
• 큐이므로, FIFO(Last In-First Out)으로 동작한다.

---

자바스크립트 동작 원리 설명

1. main 함수가 호출되어 Call Stack에 쌓인다.
   
2. log('나는')이 호출되어 Call Stack에 쌓인다.
   
3. 터미널에 나는이 출력되고 함수는 반환되어 사라진다.
   
4. setTimeout이 호출되어 Call Stack에 쌓인다.
   
5. setTimeout이 Web API에 의해, 타이머를 실행시킨다.
   
6. 이후 setTimeout는 반환되어 사라진다.
   
7. log('입니다')가 호출되어 Call Stack에 쌓이며,
   터미널에 입니다가 출력된다.
   
8. 함수는 반환되어 사라지고, main도 반환되어 사라진다.
   
9. 3초가 지난 후, Web API의 콜백 함수가 CallBack Queue에 삽입된다.
   
10. 이벤트 루프가 CallBack Queue에 있는 콜백 함수를 꺼내와
    Call Stack에 쌓는다.
    
11. 콜백 함수의 log('이재건')이 호출되어 Call Stack에 쌓인다.
    
12. 터미널에 이재건이 출력된다.
    
13. 함수는 반환되어 사라지고, 콜백 함수도 반환되어 사라진다.
    

---

✨ 출처

blog, 프론트엔드 면접 문제 은행
자바스크립트 이벤트 루프 동작 구조 & 원리 끝판왕

---