JavaScript Event Loop란?

MDN에 따르면, 이벤트 루프란, "JS의 런타임 모델은 코드의 실행, 이벤트의 수집과 처리, 큐에 대기 중인 하위 작업을 처리하는 이벤트 루프에 기반하고 있다" 라고 나온다..
무슨말인지 도통 모르겠으니, 자바스크립트 엔진의 실행 원리를 살짝 알아보자

JavaScript, what r u?

• 싱글 스레드 언어이다.
  • 뭔말이냐? ▷ 하나의 프로그램은 동시에 하나의 코드만 실행할 수 있다.
  • one thread === one call stack === one thing at a time (멀티가 안돼!!)

• 자바스크립트 엔진은 Memory Heap & Call Stack으로 구성되어 있다. (가장 유명한 것이 구글의 V8 Engine)
  • Memory Heap : 메모리 할당이 일어나는 장소 
    • ex) 우리가 프로그램에 선언한 변수, 함수 등이 담긴다
  • Call Stack : Memory Heap에 있는 사용자가 작성한 코드들이 실행될 때 하나씩 stack의 형태로 쌓이는 장소
    • 이때, 동기 함수들은 그대로 실행되고, 비동기 함수들은 Web API로 처리하게 되며 일을 분배합니다. 
    • stack : 자료구조 중 하나, 선입후출(LIFO, Last In First Out)의 방식을 따른다.
• 따라서, 자바스크립트는 단일 스레드 프로그래밍 언어이지만, Web API, Callback Queue, Event Loop 덕분에 멀티 스레드처럼 보여진다!! 👀

---

Web API

• 상기 그림의 오른쪽을 보면 보면, Web API는 JS Engine 밖에 그려져 있다. 즉, 자바스크립트 엔진이 아니다.
• 브라우저에서 제공하는 API로, DOM, Ajax, Timeout 등이 있다.
• Call Stack에서 실행된 비동기 함수는 Web API에서 처리를 하게 되고 그동안에 Call Stack은 나머지 동기 함수들을 처리한다.
• Web API는 비동기 함수들을 처리하며 작업이 완료된 비동기 함수들을 Callback Queue로 넘겨준다.

---

Callback Queue

• 비동기 함수들을 보관하는 장소
• Event Loop에서 비동기 함수를 꺼내 전까지는 계속 Queue 방식으로 보관하게 된다.
  • Queue: 자료구조 중 하나, 선입선출(FIFO-First In First Out)의 방식을 따른다.

---

Event Loop

• Call Stack과 Callback Queue의 상태를 계속 감시하며
• Call Stack에 함수들이 존재하지 않는다면
• Callback Queue에 있는 비동기 함수들을 Call Stack에 밀어넣는다.
• 그 후, Call Stack에서 비동기 함수를 실행시킨다.

---

정리한다면?
- V8 엔진에서 코드가 실행되면, Call Stack에 쌓인다.
- Stack의 선입후출의 방식에 따라 제일 마지막에 들어온 함수가 먼저 실행되며, Stack에 쌓여진 함수가 모두 실행된다.
- 비동기 함수가 실행된다면, Web API가 호출되고
- Web API는 비동기 함수의 콜백함수를 Callback Queue에 밀어넣는다.
- Event Loop는 Call Stack이 빈 상태가 되면
- Callback Queue에 있는 첫번째 콜백부터 Call Stack으로 이동시킨다. 

▶ 이러한 반복적인 행동을 틱(tick)이라고 부른다.

참고 영상