멀티 크리에이터 NoHack의 개발 로그

싱글 스레드로 동작하는 자바스크립트 😕

자바스크립트 엔진은 단 하나의 실행 컨텍스트를 통해 함수의 호출 순서를 관리합니다. 실행 컨텍스트는 스택의 구조를 띄고 있으며, 스택의 최상위 요소는 현재 실행 중인 함수입니다. 스택 구조로 이루어져 있기 때문에 최상위에서 실행 중인 함수가 종료되어야만 다음 함수가 실행될 수 있습니다.

 

이처럼 자바스크립트 엔진은 한 번에 하나의 태스크만 실행할 수 있는 싱글 스레드(Single thread) 방식으로 동작합니다. 동작 원리에 대해 공부하신 분들이라면 여기서 '자바스크립트는 싱글 스레드면서 어떻게 setTimeout/Interval과 같은 함수들이 비동기로 동작할 수 있는 것일까?'와 같은 의문이 생기실 겁니다.

 

이는 브라우저에 내장되어 있는 이벤트 루프(Event loop)가 동시성을 지원하고 있기 때문입니다.

 

자바스크립트에서 함수가 호출되면 콜 스택에 추가(push)가 됩니다. 위에서 잠깐 언급한 실행 컨텍스트가 콜 스택입니다. 콜 스택은 모든 브라우저에 탑재된 자바스크립트 엔진에 포함된 일부이며, 브라우저 별로 약간 차이가 있습니다. 스택에 추가된 함수는 값을 반환하면서 제거됩니다. 👋

 

respond 함수는 setTimeout 함수를 반환하는데, setTimeout은 Web API(브라우저의 호스트 객체)에서 제공하고 있습니다. Web API의 Timer는 setTimeout 함수의 두 번째 인자로 들어온 시간만큼 수행됩니다.

 

전달된 시간만큼 수행한 이후 바로 실행하는 것이 아닌, 태스크 큐라는 곳에 콜백 함수를 적재합니다. 태스크 큐는 setTimeout과 같은 비동기 함수의 콜백 또는 이벤트 핸들러가 일시적으로 보관되는 영역입니다. 태스크 큐와 달리 프로미스의 후속 처리를 위한 마이크로 태스크 큐도 존재하는데, 이 경우의 우선 순위는 마이크로 태스크 큐가 우선입니다.

 

이제 이벤트 루프가 등장합니다. 이벤트 루프는 큐에 대기 중인 콜백 함수가 있고, 콜 스택에는 실행 중인 함수가 없다면 태스크 큐의 함수를 콜 스택에 적재해서 실행합니다. 이처럼 이벤트 루프는 콜 스택이 비어 있음을 감지할 수 있습니다.

 

그리고 이러한 프로세스를 가지고 있기 때문에, 실행 시간에 대해서 약간 혼란스러울 수 있습니다. setTimeout 함수의 두 번째 인자로 1000ms를 넣었다 할 지라도, 이는 태스크 큐에 함수를 적재시키는 시간이지 실제로 실행하는 시간이 아닌 것을 기억해야 합니다.

 

 

참고 📖

JavaScript Visualized: Event Loop