JavaScript는 어떻게 실행되는걸까?

JavaScript는 인터프리터, Just-In-Time 컴파일 프로그래밍 언어이다.

MDN 문서에 따르면 위와 같이 표현하고 있다.
MDN 문서

1. JavaScript의 컴파일

인터프리터, JIT 컴파일을 한 번 알아보자.

1-1. 인터프리터(Interpreter)

사전적 의미의 인터프리터이다.

인터프리터 - 고급 언어(JavaScript 등)로 작성된 원시코드 명령어들을 한번에 한 줄씩 읽어들여서 실행하는 프로그램

인터프리터란, 일반적으로 JavaScript를 브라우저에서 실행시킬때 JavaScript 코드를 브라우저가 이해할 수 있는 언어로 번역하는 과정이다.

1-2. JIT(Just-In-Time) 컴파일

웹에서는 페이지 이동을 할 때마다 위의 과정을 매번 진행한다. 이동시마다 번역을 하는데 V8엔진은 이 속도를 높이기 위해서 인터프리터 방식으로 컴파일을 하고 바이트 코드로 만들어 낸다.

컴파일 속도를 높이기 위해 바이크 코드를 저장(캐싱)해두고 컴파일 과정을 할 때에 캐싱한 코드를 참조함으로 컴파일 속도가 높아진다.

위와 같은 방식을 JIT 컴파일이라고한다.

2. V8 엔진

JavaScript를 실행시켜주는 V8 엔진에 대해서 알아보자.

(※ 크롬은 V8, 파이어폭스는 SpiderMonkey 등등 브라우저마다 엔진의 이름이 다르다.)

V8 엔진은 구글이 개발한 오픈 소스 자바스크립트 엔진으로, 웹 브라우저에서 JavaScript 코드를 실행하는 데 사용된다. V8은 웹 브라우저와 함께 사용되는 것이 아니라, 웹 브라우저를 비롯한 다양한 환경(ex. NodeJS)에서 자바스크립트 코드를 실행하는 데 활용된다.

V8 엔진을 간략하게 그림으로 나타내보면 아래와 같이 나타낼 수 있다.

크게 Memory Heap과 Call Stack으로 이루어져있다.

V8엔진이 자바스크립트를 실행시키며 저장해야하는 데이터는 Heap에 함수처럼 실행시켜야 하는 것들은 Call Stack에 들어가 하나씩 순차적으로 실행한다.

(자바스크립트는 이 Call Stack이 하나만 존재하므로 싱글 스레드 방식이라고도 한다.)

2-1. 메모리힙(Memory Heap)

메모리힙에서 Heap이란 자료구조의 한 종류이다.

여기서는 동적 할당, 가비지 컬렉션 등과 같은 메모리에 관한 것을 다루며 이를 V8 엔진이 관리함으로써 개발자가 메모리의 할당, 해제와 같은 것을 직접 신경쓰지 않아도 된다.

2-2. 콜스택(Call Stack)

콜스택은 Stack이라는 자료구조를 따르며 가장 마지막에 들어간 데이터가 가장 먼저 나오는(Last In First Out) 성질을 가졌다.

위의 성질에 따라서 함수를 호출(실행)하게 된다.

console.log("1")
console.log("2")
console.log("3")

실행을 하게되면 익명함수가 Call Stack의 가장 아래에 쌓이고,

코드를 순서대로 한줄 한줄 번역하여 실행한다.

가장 위의 console.log(1)이 콜스택에 들어갔다가 나온후 다음 차례로 console.log(2)가 들어있는 모습니다.

위의 코드가 모두 실행되고나면 익명함수가 콜스택에서 빠져나오게되며 콜스택이 비게된다.

데이터의 메모리와 실행에 관한 일을 V8 엔진이 맡아서 해주기 때문에 개발자는 코드를 작성하고 실행하는데만 신경쓰면 된다.

하지만 다음에 알아볼 이벤트 루프를 짚고 넘어가야 JavaScript의 실행을 좀 더 이해할 수 있다.

다음에는 이벤트 루프에 대해서 알아보도록 하자.