[Javascript] The Javascript engine and runtime

---

목차

1. 자바스크립트 엔진

2. 엔진 동작 원리

3. 런타임

4. 콜 스택, 메모리 힙의 데이터 저장 구조

---

 

 

 

 

 

1. 자바스크립트 엔진

---

• 자바스크립트 엔진: 자바스크립트 코드를 실행하는 프로그램 또는 인터프리터(해석기). 대체적으로 웹 브라우저에서 사용된다.
• ex. V8 Engine: 구글 크롬 혹은 Node.JS에서 작동하는 자바스크립트 엔진이다. V8 이 외에도 각각의 브라우저마다 다른 자바스크립트 엔진이 존재한다.
• 엔진에 의한 인터프리터 방식이기 때문에 별도의 컴파일 과정이 필요없다. ( 웹브라우저에서 즉시 해석되어 실행됨 = 런타임 )

 

 

 

 

2. 자바스크립트 엔진 동작 원리

---

 

엔진의 주요 구성요소

 

• 모든 자바스크립트 엔진에는 Call Stack 과 Memory Heap의 영역이 존재한다.

 

• 엔진의 주요 구성요소

▶ Memory Heap

• 메모리 할당이 일어나는 곳(구조화되지 않은 메모리 풀임)
• 참조타입(객체, 배열, 함수 등) 데이터가 저장됨

 

▶ Call Stack

• 코드가 실제로 실행되는 곳
• 원시 타입(문자(string), 숫자(number), bigint, 불리언(boolean), null, undefined, 심볼(symbol) => ES6부터 추가된 타입) 데이터가 저장됨
• 실행 콘텍스트(Execution Context)를 통해 다음과 같은 일을 수행함

1. 변수 식별자(이름)저장
2. 스코프 체인 및 this 관리
3. 코드 실행 순서 관리 등을 수행

 

---

 

* 자바스크립트는 single thread 프로그래밍 언어이다. 이 의미는 Call Stack이 하나라는 얘기이며 한 번에 한 작업만 처리할 수 있다. 

 

* 호출 스택은 전역함수가 가장 먼저 호출 된 후 지역함수가 순차적으로 쌓인다.

(전역함수= 함수 외부에서 선언된 변수. 프로그램 전체에서 접근할 수 있는 변수

지역함수= 함수 내부에서 선언된 변수. 함수가 실행되면 만들어지고 함수가 종료되면 소멸함.)

 

* 함수의 실행이 끝날 때(리턴 값을 돌려줄 때), 해당 함수를 호출 스택에서 제거한다.(=스택의 역할)

 

* 호출 스택의 각 단계를 스택 프레임(Stack Frame)이라고 한다.

 

 

 

 

 

 

 

 

3. 런타임

 

---

 

• 자바스크립트 런타임이란, 자바스크립트를 사용하기 위한 모든 내용을 담고 있는 컨테이너라고 볼 수 있으며 예시로 브라우저를 들 수 있다. (자바스크립트 실행 환경이라고 불러도 무난하다)
• 따라서 자바스크립트 런타임에는 자바스크립트 엔진이 필수적이라 할 수 있다.
• 그러나 엔진만 있어서는 안되며, Web APIs 도 런타임 구성요소에 포함이 된다.
• Web API는 엔진에게 필요한 기능을 제공해주며, 윈도우 객체에 접근할 수 있도록 해준다.
• 또한, 런타임 구성요소에는 CALLBACK QUEUE 가 포함된다.
• CALLBACK QUEUE 는 실행 대기중인 모든 콜백 함수들을 갖고 있는 자료구조이다. ex) 이벤트 핸들러 등

 

 

 

 

 

 

 

 

 

4. 콜 스택, 메모리 힙의 데이터 저장 구조

---

 

 

 

1. 원시 타입 데이터(파란색 변수 a)

 

- 10이라는 값 자체는 원시 타입이므로 콜 스택에 저장된다.
- 변수 a에는 10이 저장된 콜 스택 메모리의 주소값이 저장된다.

* 변수 식별자 a 자체는 콜스택 상의 '실행 컨텍스트(Execution Context)의 렉시컬 환경(Lexical Environment)'이라는 곳에 저장된다.

 

 

2. 참조 타입 데이터(핑크색 변수 b, c, d)

 

- 배열, 객체, 함수 등은 참조 타입이므로 메모리 힙에 저장된다.
- 참조타입 데이터가 저장된 메모리 힙의 주소값은 콜스택에 각각 저장된다.
- 메모리힙의 주소 값이 저장된 콜 스택의 주소값은 각각 변수 b, c, d에 저장된다.

* 마찬가지로, 변수 식별자 b, c, d 이름 자체는 콜스택 상의 '실행 컨텍스트(Execution Context)의 렉시컬 환경(Lexical Environment)'에 저장된다.

 

 

 

 

 

예제

---

 

1. 아래의 코드는 콜스택에 어떻게 저장될까?

 

let age = 30;
let oldAge = age;
age = 31;
console.log(age); // 31
console.log(oldAge); // 30

 

 

 

age는 31이라는 값을 저장하기 위해 새 주소를 얻는다.

 

 

 

 

 

 

 

 

2. 아래의 코드는 콜스택과 메모리 힙에 어떻게 저장될까?

 

const me = {
    name: 'Jonas',
    age: 30,
};
const friend = me;
friend.age = 27;

console.log('Friend', friend); 
// { name:'Jonas', age:27 }

console.log('Me', me);
// { name:'Jonas', age:27 }

 

 

me와 friend는 같은 주소를 공유하고 있기 때문에 다음과 같이 age를 27로 변경할 수 있다.

 

 

 

 

 

 

 

참고: https://charming-kyu.tistory.com/19 

https://velog.io/@kirin/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%97%94%EC%A7%84JavaScript-engine

https://serzhul.io/JavaScript/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%97%94%EC%A7%84%EA%B3%BC-%EB%9F%B0%ED%83%80%EC%9E%84/