[Frontend] JavaScript는 정말 싱글스레드일까?

자바스크립트 엔진은 하나의 메인 스레드로 구성된다. 콜 스택(Call stack)이라는 자료구조를 이용해서 명령문을 실행하며, 하나의 메인 스레드에서 하나의 콜 스택으로 모든 명령문을 순차적으로 실행하기 때문에 싱글스레드 언어라고 할 수 있다. 즉, 한 번에 하나의 일(작업)을 한다.

 

JavaScript는 싱글스레드 언어이지만 실제로는 어떻게 멀티스레드처럼 사용할까?

비동기 함수 등의 문법으로 언어적 차원에서 병렬처리가 가능하다. 즉, Web API(setTimeout, XMLHttpRequest), Callback Queue, Event Loop로 인하여 멀티스레드처럼 보이는 것이다. 그렇다면 Event Loop는 무엇일까?

 

이벤트 루프(Event Loop)란?

자바스크립트 엔진이 아닌, 런타임(browser, node.js)에서 가지고 있는 하나의 장치이다. 콜 스택과 태스크 큐(콜백 큐)를 감시하며, 콜 스택이 비어 있는 경우에 태스크 큐에서 태스크를 가져와 콜 스택에 넣어 주는 동작을 한다. 처리할 태스크가 없는 경우에는 대기하는 형태이다.

 

 

1) Task queue에 실행해야 할 함수가 있다.

2) Call stack이 비어 있다.

이 두 조건이 충족될 때 Task queue에 있는 함수들을 순서대로 Call stack으로 이동시켜 해당 함수가 호출되도록 한다.

 

JavaScript는 정말 싱글스레드일까?

그래서 결론은!

자바스크립트 엔진만 보면 싱글 스레드가 맞지만, 런타임으로 확장해서 보면 멀티 스레드라고 할 수 있다. 브라우저 엔진은 렌더링, 메모리 초기화, 프로세스 정리 등과 같은 수많은 작업을 백그라운드에서 멀티스레드로 처리하며, 자바스크립트 엔진은 콜 스택과 메모리 힙만 담당한다.

즉, 자바스크립트 엔진은 독립적으로 실행되지 않고 런타임 영역(멀티 스레드 환경)에서 구동되기 때문에, 자바스크립트 자체는 싱글스레드가 맞지만, 자바스크립트 엔진은 독립적으로 실행되지 않기 때문에 자바스크립트와 Web API(setTimeout, XMLHttpRequest), 이벤트 루프 등의 런타임 환경(멀티스레드로 동작)을 분리하여 말하기가 어렵다.