Event Loop란

 

Event Loop란?

 

자바스크립트는 싱글스레드 언어이다.

싱글스레드란 한번에 한가지의 일 밖에 할 수 없음을 의미한다.

 

자바스크립트 엔진은 하나의 call stack을 가지고 있기 때문에 한번에 하나의 동작만을 처리할 수 있다.

그런데 브라우저가 동작하는것을 보면 많은 부분이 동시에 처리 되는 것처럼 느껴진다.

 

이와같이 자바스크립트의 동시성을 지원하는 것이 Event Loop이다.

 

자바스크립트의 코드가 실행되면 비동기 호출에 대한 처리를 브라우저에서 web API로 넘기고 동기적인 처리를 call stack에 담아 먼저 처리하게 된다. 

이후에 비동기 호출에 대한 처리가 끝나면 web API는 비동기 호출의 콜백 함수를 task queue에 담게 되고 Event Loop는 call stack이 비어있는지 확인하고, call stack이 비어있다면 task queue에 있는 함수를 call stack으로 넘겨주는 역할을 한다

---

Call stack

 

생성된 실행 컨텍스트가 올라가는 곳이다.
함수를 실행(호출)하면 실행 컨텍스트가 차례대로 콜 스택에 푸쉬되어 실행된다.

Javascript에서는 하나의 콜 스택만 운영하기 때문에 최상단의 함수가 종료되어 콜 스택에서 제거되어야 다음 함수가 실행된다.

 

---

Heep

 

힙 공간은 객체가 저장되는 메모리 영역이다. 콜 스택의 실행 컨텍스트는 힙에 올라간 객체를 참조하게 된다.

힙 메모리 영역에 올라가는 객체는 원시타입이 아닌 참조 타입으로 크기가 결정되어 있지 않다.

 

따라서 런타임에 동적으로 객체를 할당할 메모리를 할당하게 된다.

Javascript 엔진은 단순히 콜 스택의 실행 컨텍스트를 올리고 실행할 뿐이기 때문에 소스코드 평가 및 실행을 제외한 모든 기능은 런타임 환경인 Node.js에서 담당하게 된다.

 

예를들어 setTimeout() 타이머를 사용하는 경우 콜백 함수를 평가하고 실행하는 것은 Javascript엔진에서 처리하지만

호출 스케줄링을 위한 타이머 설정, 콜백 함수 등록은 브라우저나 Node.js 같은 런타임 환경이 담당하게 된다.

이를 위해 런타임 환경은 Event Loop와 Task Queue를 제공한다.

 

 

Event Loop

 

Event Loop는 콜 스택에 현재 실행중인 실행 컨텍스트가 존재하는지와 태스크 큐에 대기중인 콜백함수나 

이벤트 핸들러가 존재하는지 반복적으로 체크한다.

 

만약 콜 스택이 비어있고 태스크 큐에 대기중인 함수가 존재하는 경우 FIFO 방식으로

태스크 큐의 대기중인 함수를 콜 스택으로 이동하게 된다.

이 방식으로 비동기 처리 방식을 제공한다.

 

---

Tack Queue

 

비동기 함수의 콜백 함수가 임시적으로 저장되는 공간이다. 만약 Promise를 사용하는 경우

Promise의 후속 처리 메소드의 콜백 함수는 마이크로태스크 큐에 저장된다.

 

---

정리하자면

 

Javascript 엔진 자체는 싱글 스레드로 작동한다. Javascript에서 함수가 실행되기 위해서는 먼저 실행 컨텍스트가 콜 스택에 올라가고 하나씩 pop() 하면서 함수를 작동 시킨다.

 

Javascript에서 비동기 방식을 처리하기 위해서는 콜백 함수가 태스크 큐에 푸시되어 대기하게 되고 콜 스택이 비는 시점에 이벤트 루프가 태스크 큐의 함수를 콜 스택에 올리면서 실행하게 된다. 

 

Javascript 엔진 자체는 싱글 스레드기 때문에 절대로 비동기 프로그래밍을 처리할 수 없다. 하지만 Javascript를 작동시키는 런타임 환경인 Node.js나 웹 브라우저에서는 멀티 스레드를 지원하기 때문에 비동기 프로그래밍이 가능한 것이다.