이벤트 루프

 자바스크립트라는 언어는 싱글 스레드(Single Thread) 언어라고 알려져 있다. 보통 싱글 스레드라고 하면 한 번에 하나의 작업만 수행할 수 있다고 생각한다. 하지만 실제로 자바스크립트가 사용되는 환경을 생각해보면 많은 작업이 동시에 처리되고 있는 걸 볼 수 있다. 어떻게 동시에 처리할 수 있는 걸까?

 

 자바스크립트는 이벤트 루프를 이용해서 비동기 방식으로 동시성을 지원한다고 한다. 자바스크립트 엔진에서 제공되는 것은 아니고 브라우저나 NodeJS에서 지원되는 것이다. 그렇다면 비동기 방식은 어떻게 동작하는 것일까? 

 

자바스크립트 비동기 런타임 과정

 

 자바스크립트가 비동기 코드를 어떻게 동작시키는지 알아보기 위해선 일단 자바스크립트 런타임 환경에 대해 알아야 한다. 여기서는 간단하게 비동기를 동작하는데 필요한 요소들만 살펴보자.

 

 

자바스크립트가 실행될 때는 다음과 같은 요소들이 실행을 도와준다.

• 콜 스택(Call Stack): 자바스크립트에서 수행해야 할 함수들을 순차적으로 스택에 담아 처리
• Web API: 웹 브라우저에서 제공하는 API로 AJAX나 Timer 등의 비동기 작업을 실행
• 태스크 큐(Task Queue): Callback Queue라고도 하며 Web API에서 넘겨받은 콜백 함수(callback)를 저장
• 이벤트 루프(Event Loop): 콜 스택이 비어있다면 태스크 큐의 작업을 콜 스택으로 옮김

 

그러면 실제 코드를 예시로 비동기 코드가 동작하는 과정을 알아보자.

setTimeout(() => console.log('async yg'));
console.log('hello yg');

// hello yg
// async yg

 

위에 코드는 'hello yg'와 'async yg'이라는 문자열을 콘솔에 출력하는 간단한 코드이다. 하지만 'async yg'가 위에 위치함에도 비동기 코드라 나중에 출력되는 것을 볼 수 있다. 어떻게 이렇게 동작하는 것일까?

 

 

처음에 우선 setTimeout 함수가 실행되며 콜 스택에 setTimeout 함수가 추가된다.

 

 

 

 

setTimeout 함수는 자바스크립트 엔진이 처리하지 않고 Web API가 처리한다.(NodeJS의 경우 Timers 모듈) setTimeout함수는 Web API의 Timeout작업을 요청한 시간이 지나면 태스크 큐로 인자로 받은 콜백 함수를 전달한다.

 

 

 

 

그리고는 두 번째 라인에 작성한 console.log가 콜 스택에 추가된다. 그리고 콜 스택의 console.log가 실행되며 콘솔에는 'hello yg'이라는 문자열이 출력된다.

 

 

 

 

이때, 자바스크립트의 이벤트 루프는 콜 스택이 비어있는지 항상 확인하는데 방금 console.log가 실행되어 콜 스택이 비워진 것을 확인한다.

 

 

 

 

콜 스택이 비워진 것을 확인한 이벤트 루프는 태스크 큐에 있던 콜백 함수를 콜 스택으로 옮겨 작업을 수행한다. 콘솔에는 'async yg'이 추가로 출력된 것을 볼 수 있다.

 

 

 

모든 작업이 끝나게 되면 다음과 같이 콜 스택과 태스크 큐가 비워진 것을 볼 수 있다. 자바스크립트의 비동기 작업은 이렇게 실행된다.

 

위에서 살펴본 것과 같이 이벤트 루프는 이벤트 발생 시 호출되는 콜백 함수들을 관리하여 태스크 큐에 전달하고, 태스크 큐에 담겨있는 콜백 함수들을 콜 스택에 넘겨주는 역할을 하여 자바스크립트가 비동기적으로 동작하게 한다.

 

 

 

---

참고 자료

• Why doesn’t JavaScript support multithreading?
• Why JavaScript is a single-thread language that can be non-blocking ?
• 비동기적 Javascript – 싱글스레드 기반 JS의 비동기 처리 방법