[Javascript & Node] 자바스크립트 메모리 구조에 대해서 알아보자. (가비지 컬렉션 까지)

 

 

1. 메모리 구조

 

이미지 출처 : https://velog.io/@code-bebop/JS-메모리-구조

 

자바스크립트 엔진이 가지는 세 가지 메모리 공간이다.

Code Area, Call Stack, Heap을 시각화한 모습으로, 하나로 묶어 프로그램의 주소 공간이라고 한다.

 

 

(1) Code Area

: 실행할 JS 코드를 저장한다.

 

(2) Call Stack

: 실행 중인 함수를 추적하며 계산을 수행하고, 지역 변수를 저장한다.

  변수들은 LIFO 형식으로 저장된다. 또한 원시 타입들이 이 곳에 저장된다.

 

1) 변수 식별자(이름) 저장

2) 스코프 체인 및 this 관리

3) 코드 실행 순서 관리 등을 수행

 

(3) Heap

: 참조 타입(객체 등)들이 할당되는 곳이다.

  Heap의 메모리 할당은 LIFO 정책을 따르지 않고 랜덤하게 배치된다.

  또한, 메모리 누수를 방지하기 위해 JS 엔진의 메모리 관리지가 항상 관리한다. (가비지 컬렉션 관련)

 

 

 

 

 

 

이미지 출처 : charming-kyu.tistory.com/19

 

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

 

 - 10이라는 값 자체는 원시 타입이므로 콜 스택에 저장된다. 

 - 변수 a에는 10이 저장된 콜 스택 메모리의 주소값이 저장된다.

 * 변수 식별자 a 자체는 콜 스택 상의 '실행 컨텍스트의 렉시컬 환경'에 저장된다.

 

 

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

 

 - 배열, 객체, 함수 등은 참조 타입이므로 메모리 힙에 저장된다.

 - 참조타입 데이터가 저장된 메모리 힙의 주소값은 콜스택에 각각 저장된다.

 - 메모리힙의 주소 값이 저장된 콜 스택의 주소값은 각각 변수 b,c,d에 저장된다.

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

 

 

 

 

 

 

가비지 컬렉션 (Garbage Collection)

 

(1) 메모리 생명주기

 

1. 필요 메모리 할당

2. 메모리 사용

3. 필요 없어진 메모리 제거

 

 

변수의 필요유무를 판단하고 메모리에서 제거하는 역할을 하는 것이 가비지 컬렉션이다.

가비지 컬렉션으로 자동 메모리 관리가 가능하다.

정확히 언제 메모리에서 해제되는지는 알 수 없다.

 

(2) 가비지 컬렉션 작동 원리 (Mark-Sweep)

 

사실 Heap 내부에는 세 개 이상의 가비지 컬렉션이 존재하고, 각각 다른 내부 알고리즘을 사용하여 메모리를 최적화 시킨다.

 

여기서 가장 흔히 알려진 Mark-Sweep 알고리즘을 통해 가비지 컬렉션의 작동 원리에 대해 알아보면,

 

Mark-Sweep 알고리즘은 roots라는 root 객체의 집합을 만들어 낸다. JS에서 roots는 전역 변수들이다. 그리고 주기적으로 roots로부터 접근 가능한 모든 객체들을 돌아다니며 Marking한다. Marking이 끝나고 메모리 내에 Marking이 되지 않은 데이터들은 사용하지 않는 데이터로 판단해서 지워버린다. (Sweeping)

 

이것이 Mark-Sweep 가비지 컬렉션의 기본 동작이다.

 

 

 

Refeneces

[javascript] 콜스택/메모리힙 구조, 데이터 저장/참조 원리

JS 메모리 구조