자바스크립트는 단일 스레드, 동시에 하나의 작업만을 처리할 수 있다고 한다. 그러나 여러 작업이 동시에 처리되는 것 같은데 어떻게 동시성을 지원하는 걸까?
자바스크립트 엔진 V8의 구조는 위와 같다.
호출 스택이 하나이므로 자바스크립트가 단일 스레드인 것은 맞다.
그러나 자바스크립트 엔진을 '구동하는 환경', 즉 브라우저나 Node.js에서는 여러 개의 스레드가 사용된다.
이러한 구동환경에서 자바스크립트 엔진과 상호 연동하기 위해 사용하는 장치가 Event loop
이다.
호출 스택은 여러 함수들(functions)을 호출하는 스크립트에서 해당 위치를 추적하는 인터프리터 (웹 브라우저의 자바스크립트 인터프리터같은)를 위한 메커니즘입니다. 현재 어떤 함수가 동작하고있는 지, 그 함수 내에서 어떤 함수가 동작하는 지, 다음에 어떤 함수가 호출되어야하는 지 등을 제어합니다.
- MDN
function multiply(x, y) {
return x * y;
}
function printSquare(x) {
var s = multiply(x, x);
console.log(s);
}
printSquare(5);
위와 같은 코드가 실행될 때 호출 스택의 동작 단계는 다음과 같다.
function foo {
foo();
}
foo();
위와 같이 계속 foo()를 호출하는 함수를 만나면 콜 스택에 스택 프레임이 계속 쌓여 스택 날려버리기
가 일어난다.
싱글 스레드의 한계를 보완하기 위해 비동기 콜백(asynchronous callback)을 이용한다.
비동기 콜백에는 Web APIs, ES6의 Promise가 있다.
자바스크립트 코드 실행 중에 이벤트를 만나면 이벤트가 콜백 큐에 차례대로 쌓인다. 콜백 큐는 FIFO 선입선출 룰을 따른다.
이벤트 루프는 콜 스택이 비었는지 확인하고, 비었으면 콜백 큐에 있는 이벤트를 가져다 콜 스택에 밀어넣는다. 이 한 번의 작업을 틱(tick) 이라고 한다. 이벤트 루프는 이 작업은 반복(loop)한다.
아래 동영상이 자바스크립트 동작 원리를 이해하는데 많은 도움이 되었다!(한글자막 있음)
https://joshua1988.github.io/web-development/translation/javascript/how-js-works-inside-engine/
https://developer.mozilla.org/ko/docs/Glossary/Call_stack
공부한 내용을 정리한 포스트입니다.
잘못된 내용이 있다면 댓글 부탁드립니다:)