이벤트 루프 작동 원리

자바스크립트는 하나의 프로그램에서 하나의 코드만 실행할 수 있는 싱글 스레드 프로그래밍 언어다. 

하지만 자바스크립트의 동시성을 지원해주는 것이 바로 이벤트 루프다. 

즉, 자바스크립트 엔진은 싱글 스레드로 동작하지만, 브라우저는 멀티 스레드로 동작하는 것이다. 

 

이 말은 아래의 작동 원리를 보면 조금 더 이해가 잘 될 것이다. 

---

먼저 v8 자바스크립트 엔진이 어떤 절차로 동작하는지 간단하게 작성했다. 

아래의 이미지를 보면서 흐름을 읽는 것이 이해하기가 쉽다. 

1. 힙 영역에서 메모리를 할당

2. 콜스택에 맨 처음으로 선언한 코드들을 가지고 있는 anonymous 푸시

3. 그 다음에, 호출된 코드들이 순차적으로 콜스택에 푸시되고 실행

4. 호출된 코드들 중 비동기 함수는 Web APIs로 이동

5. Web APIs에 있는 비동기 함수의 콜백함수 또는 이벤트 핸들러를 콜백 큐에 일시적으로 보관

6. 콜스택이 비어있을 때만, 콜백 큐에 할당된 함수들을 순차적으로 콜스택에 할당

7. 콜 스택이 비어있을 때까지 동작을 반복

---

그럼 이제 1번부터 자세하게 설명해 보려고 한다. 

 

1. 힙 영역에서 메모리를 할당

힙은 메모리 할당이 일어나는 곳으로, 객체(변수, 함수 등)가 담긴다.

힙은 구조화되어 있지 않다는 특징이 있습니다.

객체는 크기가 정해져 있지 않아,메모리 공간의 크기가 런타임에 동적으로 결정되기 때문이다. 

 

2. 콜스택에 맨 처음으로 선언한 코드들을 가지고 있는 anonymous 푸시

콜스택에 우선 맨 처음으로 선언한 코드들을 읽고 익명 함수를 푸시한다. 

 

3. 그 다음에, 호출된 코드들이 순차적으로 콜스택에 푸시되고 실행

실행 컨텍스트 스택이 바로 콜스택이다. 따라서 실행될 코드의 한 줄 단위로 할당이 된다. 

호출될 때 코드들이 순차적으로 푸시되고, 실행된다. 

하나의 콜스택을 사용하기 때문에, 최상위 실행 컨텍스트가 콜 스택에서 제거되기 전까지 다른 테스크는 실행되지 않는다.

 

참고로, 브라우저 혹은 엔진마다 콜 스택의 한계점은 다르다. 

따라서, setTimeout에 0초의 타이머를 설정해둔 경우 결과값이 다를 수 있다.

 

4. 호출된 코드들 중 비동기 함수는 Web APIs로 이동

 

5. Web APIs에 있는 비동기 함수의 콜백함수 또는 이벤트 핸들러를 콜백 큐에 일시적으로 보관

비동기함수의 콜백함수로는 DOM (document), AJAX (XMLHttpRequest), Timeout(setTimeout) 등이 있다. 

 

참고로 콜백큐는 Microtask Queue(Job Queue), Animation Frames, Task Queue(Event Queue) 등으로 이루어져 있고,

이벤트 루프가 콜백큐에서 탐색하는 우선순위는 M > A > T 이다. 

 

6. 콜스택이 비어있을 때만, 콜백 큐에 할당된 함수들을 순차적으로 콜스택에 할당

 

7. 콜 스택이 비어있을 때까지 동작을 반복

---

이벤트 루프에 대해 정리를 해보았는데, 확실히 이해를 하게 된 것 같다.

여러번 보고 코드도 많이 작성해봐야 역시 와닿는 것 같다. 

 

 

---

질문이나 잘못된 점은 댓글로 남겨주세요 :)💖