[JS] event loop이란?

 

 

자바스크립트의 큰 특징 중 하나는, 바로 싱글 스레드(single-threaded) 방식으로 동작한다는 것이다. 그런데 실제로 브라우저가 동작하는 방식을 보면, 마치 여러 작업이 동시에 진행되는 것 같은 느낌을 받을 때가 있다. 싱글 스래드이기 때문에 한번에 하나의 작업이 진행되어야 할 것 같은데, 어떻게 여러개가 동시에 진행될 수 있을까?

 

이렇듯 자바스크립트가 마치 동시에 여러가지 일을 하는 것처럼 보이게 해주는데엔, 브라우저 및 런타임 환경에 내장되어 있는 기능 중 하나인 이벤트 루프(event loop)가 큰 기여를 한다.

 

이벤트 루프(Event loop)란 브라우저/런타임 환경(e.g. Node.js)에 내장되어 있는 기능 중 하나로, (1) 콜 스택(call stack)에 현재 실행 중인 실행 컨텍스트가 있는지, 그리고 (2) 이벤트 큐(event queue)에 대기중인 함수가 있는지 반복해서 확인을 한다. 만약 콜 스택이 비어있고, 이벤트 큐에 대기중인 함수가 있다면 이벤트 루프는 순차적으로 큐의 First In First Out에 따라 대기 중인 함수를 콜 스택으로 이동시킨다. 그러면 콜 스택으로 이동한 함수가 실행되게 된다.

 

 

 

 

 

 

 

위 그림을 참고해자. 위 그림에서 "JS"라고 표기된, 왼쪽 상단의 박스는 V8과 같은 자바스크립트 엔진을 뜻한다. 이러한 엔진 내부는 크게 힙(heap)과 콜 스택(call stack) 두 가지로 구분할 수 있다.

 

힙: 객체가 저장되는 메모리 공간. 콜 스택의 요소인 실행 컨텍스트가 참조하는 것들이 저장되어 있음.

콜 스택: 소스코드 평가 과정에서 생성된 실행 컨텍스트가 추가되고 제거되는 스택 자료구조.

 

힙과 콜스택은 자바스크립트 엔진에 포함되어 있는 것들이고, 이 자바스크립트 엔진은 요청된 task를 그냥 단순하게 순차적으로 실행하는 역할을 한다. 이 부분으로 인해 자바스크립트가 single-threaded라고 하는 것이다.

 

반면, 실제 자바스크립트가 동작하는 브라우저나 런타임 환경은 이 엔진에 포함되지 않는 추가적인 +@ 기능들을 가지고 있다. 그 기능들에 바로 이벤트 룹과 이벤트 큐(task queue, callback queue 등으로도 불린다)가 포함되어 있다.