Javascript의 엔진 구조에 대해 알아보자

아코언니·2023년 10월 24일

JavaScript 기술면접

기술면접

목록 보기

7/10

앞에 포스팅 했던 브라우저의 렌더링 과정에서 끝 부분에 살짝 나왔던 자바스크립트 엔진에 대해 알아보고 싶었다.

Javascript 엔진 종류

V8: 대표적인 자바스크립트 엔진으로 Google에서 개발한 오픈소스 엔진이다.
SpiderMonkey: 최초의 자바스크립트 엔진. 넷스케이프 네비게이터 웹 브라우저를 위해 개발되었으나 지금은 모질라의 파이어폭스에서 사용되고 있다.
Rhino: 모질라 재단이 운영하며 모두 자바로 개발되었다. 오픈소스이다.
JavaScriptCore : 애플에서 개발한 사파리 브라우저에서 사용중인 오픈소스 엔진이다.
Chakra(Jscript9) : 마이크로소프트의 익스플로러용 엔진이다.
Chakra(JavaScript) : 마이크로소프트 엣지용 엔진이다.
...

Javascript 엔진 구조

대표적인 엔진 V8을 예시로 가져왔다.

자바스크립트 엔진은 Memory Heap과 Calll Stack 이 두가지로 이루어져있다.

Call Stack

자바스크립트는 싱글 스레드 방식의 언어로 단 하나의 Call Stack(호출스택)만을 사용한다.

프로세스와 스레드의 차이
포스팅 할 예정임니다..

호출 스택은 코드 실행에 따라 실행 컨텍스트가 쌓이는 곳으로, 한 번에 하나의 작업만 실행할 수 있다.
(호출 스택을 하나만 사용하기 때문)

한 번에 하나의 작업만 실행하기 때문에 해당 함수가 끝나기 전까지 다른 어떤 Task(일, 작업)도 수행될 수 없다. 각 Task는 순차적으로 호출 스택에 담아 처리된다.

Call Stak에는 원시 값과 실행 컨텍스트(Execution Context)가 저장된다.

Call Stack === 콜 스택 === 호출 스택

// 예제코드
function multiply(x, y) {
    return x * y;
}
function printSquare(x) {
    var s = multiply(x, x);
    console.log(s);
}
printSquare(5);

호출 스택에는 한번에 한 작업만 가능하다.

그렇기 때문에 작업을 스택 형태로 쌓고, 제일 먼저 실행해야 하는 함수가 스택의 최상단에 위치하게 된다.
호출 스택에 쌓이는 하나의 사각형을 스택 프레임(Stack Frame)이라고 한다.

하지만 호출 스택에는 한도가 존재하기 때문에 한도를 넘게 되면 에러가 발생하는데 이것을 Stack Overflow라고 말한다.

Memory Heap

자바스크립트에서 사용되는 메모리 공간이다.
동적으로 데이터가 할당되며 크기를 예측하기 힘든 참조 타입을 저장하기에 적합한 구조다.
그래서 메모리 힙에는 참조타입이 저장된다.

C언어와 같은 로우 레벨 언어에서는 메모리 관리를 위해 malloc(), free()와 같은 함수를 이용해서 메모리를 할당하고 제거하지만, 자바스크립트에서는 GC(Garbage Colletion)가 그 역할을 대신해준다.

GC(가비지 컬렉션)
할당된 메모리가 더 이상 사용되지 않을때 할당된 메모리를 자동으로 해제 해주는 것

Call Stack에는 원시 값, Memory Heap에는 참조 값 이게 무슨 소리야??

콜 스택에는 작업(task)이 들어올때 마다 그 함수의 실행 컨텍스트가 쌓인다.

실행 컨텍스트에는 함수의 매개변수, 지역변수, 스코프 등이 저장되는데,
이때 변수의 값이 원시 값일 경우에는 콜 스택에 쌓이게 되어서 스택 내에서 직접 사용된다.
하지만 참조 변수일 경우에는 그 변수가 메모리 힙에 할당이 되고 힙에 저장된 데이터를 참조해서 사용된다.

자바스크립트는 다른 것과 같이 동작한다.

자바스크립트는 엔진으로만 동작을 하지 않는다.
자바스크립트는 싱글 스레드 방식을 사용하기 때문에 한 작업 밖에 하지 못한다는 단점이 있는데, 비동기 작업이 필요한 함수를 같이 동작하고자 하기 때문에 비동기 작업을 위해 Web APIs와 Callback Que, Event Loop와 같이 동작한다.