자바스크립트의 기본적인 런타임 환경

자바스크립트 엔진

각각의 웹 브라우저 마다 자바스크립트 코드를 구문 분석 하는 자바스크립트 엔진 이 있습니다. 대표적으로 Chrome은 V8 JS Engine 이라고 부르는 것을 사용합니다.

웹 서버에서 자바스크립트 코드를 수신하면 V8 JS Engine이 이 자바스크립트 코드들을 파싱하기 시작합니다. 자바스크립트 코드를 컴퓨터가 이해 할수있는 기계어 코드로 바꾸는 것입니다. 이러한 자바스크립트가 실행되는 환경이 자바스크립트 런타임 환경입니다.

자바스크립트 런타임 환경

자바스크립트 런타임 환경을 하나의 큰 박스라고 생각했습니다. 이 박스 안에는 자바스크립트 엔진, WEB APIs, Callback Queue라는 작은 박스 3개가 있고 자바스크립트 엔진의 콜 스택과 콜백 큐를 활용해주는 Event Loop가 있습니다.

자바스크립트 엔진

아래는 자바스크립트 엔진 V8의 구성요소들 입니다.

Memory Healp (메모리 힙)

V8은 코드에서 변수와 함수 선언을 발견함에 따라 힙에 저장합니다. 변수나 함수의 선언문들이 메모리 영역에 할당이 일어나는 곳 입니다.

Call Stack (콜 스택)

V8이 함수 호출과 같은 실행 가능한 항목(실행 컨텍스트)을 발견하면 이를 스택에 추가합니다. 스택에 추가되면 V8이 바로 들어가서 코드 구문 분석을 시작하고 힙에 변수를 추가하고 스택의 맨 위에 새 함수 호출을 추가하거나 Web API 호출이 필요하다면 다른 작은 박스인 WEB APIs로 보내버립니다. 함수가 값을 반환하거나 Web API 컨테이너로 전송 되면 콜 스택에서 제거되며 다음으로 이동합니다.

• 콜 스택은 LIFO 데이터 구조입니다.

WEB APIs

이벤트 리스너(onClick, setTimeout...), HTTP / AJAX 요청들을 처리하며 '클릭'이 발생하거나 HTTP 요청이 소스에서 데이터 가져 오기를 완료하거나 타이머가 설정된 시간에 도달한다면 콜백 함수가 다른 작은 박스인 CallQueue로 전송됩니다.

Callback Queue (콜백 큐)

스택이 완전히 비워 질 때까지 '대기'합니다. 스택이 비어 있으면 큐의 시작 부분에있는 콜백 함수를 스택으로 보냅니다. 스택이 다시 지워지면 다음 콜백 함수를 전송합니다.

• 콜백 큐는 FIFO 데이터 구조입니다.

Event Loop (이벤트 루프)

이벤트 루프는 지속적으로 스택과 큐를 감시 하는 것입니다. 스택이 비어있는 것으로 확인되면 콜백 큐에게 다음 콜백 함수를 보내도록 알립니다. 대기열과 스택은 일정 기간 동안 비어있을 수 있지만 이벤트 루프는 두 가지 확인을 중지하지 않습니다.

결론

이러한 런타임 실행 환경 덕분에 싱글 쓰레드인 자바스크립트가 멀티 쓰레드처럼 동작하는 것입니다. 자바 스크립트는 한 번에 하나의 함수 만 실행할 수 있습니다. 그러나 Web API 컨테이너는 대기열에 콜백을 영원히 추가 할 수 있고 대기열은 이러한 콜백을 스택에 영원히 추가 할 수 있기 때문에 자바 스크립트를 비동기식으로 작동시킵니다!