Javascript 메모리 개념 (V8엔진 & 콜스택Call Stack & 힙Heap)

‘자바스크립트의 메모리 개념’

 

‘자바스크립트 엔진 ? V8엔진이란 ?’

자바스크립트는 Interpreter Language(≠ Compile Language)이기 때문에 코드를 해석하고 실행하는 엔진이 필요하다. 구글에서 만든 V8엔진은 자바스크립트를 해석하고 컴파일하여 기계어로 변환해준다.

 

‘V8엔진의 메모리 구조: 콜스택과 힙’

Javascript는 단일 스레드이므로 V8 엔진은 Javascript 컨텍스트 당 한개의 프로세스를 사용한다.

실행 중인 프로그램은 V8 프로세스에서 할당된 일정량의 메모리로 표현되는데 이를 Resident Set이라고 한다. 이 Resident Set이 힙메모리와 스택으로 나누어져 있다.

즉 자바스크립트 엔진이 자바스크립트를 실행할 때마다 콜스택 메모리와 힙 메모리를 사용하며 실행되는 것이다.

 

 

 

---

‘실제 예시’

class Employee {
    constructor(name, salary, sales) {
        this.name = name;
        this.salary = salary;
        this.sales = sales;
    }
}

const BONUS_PERCENTAGE = 10;

function getBonusPercentage(salary) {
    const percentage = (salary * BONUS_PERCENTAGE) / 100;
    return percentage;
}

function findEmployeeBonus(salary, noOfSales) {
    const bonusPercentage = getBonusPercentage(salary);
    const bonus = bonusPercentage * noOfSales;
    return bonus;
}

let john = new Employee("John", 5000, 5);
john.bonus = findEmployeeBonus(john.salary, john.sales);
console.log(john.bonus);

 

위의 표는 https://speakerdeck.com/deepu105/v8-memory-usage-stack-and-heap?slide=2 여기서 보여주는 대로 정리해본 것이다.
예시를 봐서 알겠지만, 실행컨텍스트는 전역 실행컨텍스트와 함수 실행 컨텍스트로 나뉘는데 제일 처음 GEC (전역 실행 컨텍스트)가 생성되고 원시 값은 콜 스택에, 참조값은 힙에 저장이 된다.

전체 코드가 실행이 끝나고 GEC가 콜 스택에서 제거된다. GEC가 제거됨에 따라서 힙의 객체를 참조하는 스택의 값이 없어지기 때문에 가비지 컬렉터에 의해 제거된다.

 

 

---

*실행컨텍스트에 대한 자세한 내용은 아래 참고*

https://joannashin.tistory.com/123

Execution Context 실행 컨텍스트

 

---

참조

함수 실행 순서 별로 메모리가 어떻게 바뀌는지 보여주는 곳:
https://speakerdeck.com/deepu105/v8-memory-usage-stack-and-heap?slide=2

https://deepu.tech/memory-management-in-v8/