자바스크립트 런타임 환경 동작 원리

자바스크립트 런타임 환경은 위의 이미지와 같은 구조를 가지고 있습니다. Js엔진(Memory Heap, Call Stack), Web APIs, Callback Queue, Event Loop 등으로 이루어져 있으며, 각각 맡은 역할이 다릅니다.

자바스크립트를 처음 접하는 사람들은 자바스크립트가 멀티 스레드 언어로 종종 오해하는 경우가 있습니다. 왜냐하면 Web APIs, Callback Queue, Event Loop를 활용하여 비동기 처리를 할 수 있기 때문입니다. 하지만 자바스크립트는 Call Stack하나로 동작하는 싱글스레드 언어 입니다.

자바스크립트 엔진(Js Engine)

자바스크립트 엔진은 자바스크립트 코드를 이해하고 실행을 도와줍니다. 대표적으로 크롬(Chrome)과 Node.js에서 사용하는 V8엔진이 있으며, 각 브라우저 별로 여러가지 엔진들이 존재합니다.

자바스크립트 엔진은 크게 메모리 힙(Memory Heap)과 콜 스택(Call Stack)으로 이루어져 있습니다.

메모리 힙(Memory Heap)

메모리 힙은 참조 타입(object, array, function 등등) 데이터가 저장되는 공간입니다.

콜 스택(Call Stack)

콜 스택은 원시타입(number, string, null, undefind 등등) 데이터와 참조 타입 데이터 그리고 실행컨텍스트를 저장하는 공간입니다. 콜 스택은 LIFO(last-in, first-out)구조를 가지것이 특징이며, 콜 스택에 마지막에 들어온 실행컨텍스트부터 실행한다는 것을 의미합니다.
만약 비동기 처리를 하는 컨택스트가 들어온다면 이는 Web APIs에 전달됩니다. 참고로 자바스크립트는 콜 스택이 한개 이므로 싱글 스레드 언어입니다.

콜 스택에서 저장되는 참조 타입 데이터는 주소와 값으로 이루어지는데 값에는 메모리 힙의 주소가 들어있습니다.

브라우저 웹 APIs(Brower Web APIs)

Web APIs는 http 요청, setTimeout(), 이벤트 핸들러 등록과 같이 웹 브라우저에서 제공하는 기능을 말합니다. 비동기 작업을 수행하기 위해 브라우저에서 지원하는 공간입니다. 콜 스택에서 비동기 처리를 하는 컨텍스트를 받아오며, 비동기 작업 완료시 콜백 큐(Callback Queue)에게 콜백함수를 전달합니다. 이 Web APIs 덕분에 자바스크립트가 멀티스레드 언어처럼 보이는 것입니다.

콜백 큐(Callback Queue)

콜백 큐는 Web APIs에서 완료된 결과를 반환하는 콜백함수를 전달받으며 대기하는 공간입니다. FIFO(first-in, forst-out) 구조를 갖는것이 특징입니다. 콜 스택이 비어있다면 즉, 동기 작업을하는 컨텍스트가 끝나면 이벤트 루프(Event Loop) 에 의해 콜 스택으로 들어가서 콜백 함수가 실행됩니다.

이벤트 루프(Event Loop)

이벤트 루프는 콜 스택에 현재 실행중인 컨텍스트가 있는지, 그리고 콜백 큐에 대기중인 함수가 있는지 반복적으로 확인합니다. 만약 콜 스택이 비어있고 콜백 큐에 대기중인 함수가 있다면 대기중인 콜백 함수를 순차적으로 콜 스택에 옮겨주는 역할을 합니다.