[JavaScript] 메모리 관리와 가비지 컬렉션 동작 방식

자바스크립트의 메모리 관리

JavaScript, Python, Java와 같은 하이 레벨 언어는 가비지 컬렉터가 자동으로 메모리를 관리해줍니다.

반면, C언어 같은 로우 레벨 언어에서는 메모리 관리는 위해 mallock()과 free()를 사용하여 수동으로 관리합니다.

 

*가비지 컬렉션(Garbage Collection)

쓸모 없어진 객체가 차지하는 메모리를 자동으로 해제하는 것

- 장점 : 메모리 관리를 완벽하게 할 필요가 없다.

- 단점 : 언제 가비지 컬렉터가 진행될지 예측하기 어렵고, 가비지 컬렉터가 동작하는 시간이 든다.

 

메모리 생존주기

메모리 생존주기는 프로그래밍 언어와 관계없이 비슷합니다.

 

1. 필요할 때 할당

2. 할당된 메모리를 사용(읽기, 쓰기)

3. 해당 메모리가 필요 없어지면 해제

 

이때, 1,3을 암묵적으로 시행함에 있어 하이 레벨 언어로 간주됩니다.

 

자바스크립트의 변수와 메모리

1. Primitive Type

- 자바스크립트 원시 타입은 숫자, 문자열, 불리언, null, undefined, 심볼 이렇게 6가지가 있음

- 원시 타입 데이터는 불변하는 데이터로, 메모리를 한번 할당받으면 값이 변경되지 않음

let num  // undefined
num = 80
num = 100

 

자바스크립트에서는 값을 재할당하면 새로운 메모리 공간을 할당받아 값을 넣고, 변수가 가리키는 메모리주소가 변경되므로

이전 값은 더 이상 사용되지 않으므로 가비지 컬렉션 대상이 됩니다.

(** C에서는 변수에 값을 재할당하면, 변수가 가리키고 있는 메모리주소의 값이 바로 변경됨)

 

2. Object Type

- 원시 타입을 제외한 모든 것이 객체 타입으로, 객체, 배열, 함수 등이 모두 객체 타입

- 객체 타입을 변수에 할당하면, 변수에는 실제 객체가 저장된 힙 메모리 주소가 저장됨

 

아래와 같은 person 객체가 있다고 가정해보겠습니다.

const person = {
  name: 'Lee'
}


// 메모리 주소를 공유하기 때문에 같은 객체
const p1 = person
p1 === person  // true

// 메모리 주소가 다르기 때문에 서로 다른 객체
const p2 = { ...person }
p2 === pserson  // false

 

- p1처럼 객체 타입을 담은 변수를 다른 변수에 할당하면, 메모리 주소를 공유하기 때문에 같은 객체를 가리킴

- p2처럼 객체를 복사해서 새로운 변수에 할당하면, 객체의 구성은 같을 수 있어도 메모리 주소가 다르기 때문에 서로 다른 객체임

 

즉, 자바스크립트 객체에 접근하는 방법은 메모리 주소를 통하는 것으로, 일종의 포인터 역할을 합니다.

따라서 객체를 가리키는 포인터가 하나도 없으면 객체를 사용할 방법이 없으므로 가비지 컬렉션의 대상이 됩니다.

 

자바스트립트에서의 메모리 할당

1. 값 초기화

- 프로그래머를 할당 문제로부터 자유롭게 하기 위해서, 자바스크립트는 값을 선언할 대 자동으로 메모리를 할당합니다.

 

2. 함수 호출을 통한 할당

- 함수 호출의 결과 메모리 할당이 일어나기도 합니다.

- 메서드에서도 새로운 값이나 객체를 할당하기도 합니다.

 

이렇게 할당 된 메모리를 쓰거나 읽는것을 값을 사용한다고 합니다.

위에서 살펴보았던 것처럼, 할당된 메모리가 더 이상 필요 없을 때 해제를 해야하는데,

적절한 시기를 결정하지 못하면 메모리 누수가 발생하게 됩니다.

자바스크립트는 이러한 메모리 누수가 일어나지 않게 메모리 할당을 모니터링하고 할당된 메모리의 블록이 더 이상 필요하지 않은 시점을 확인하여 회수하는 가비지 콜렉터라는 자동 메모리 관리 형식을 활용합니다.

자바스크립트의 가비지 컬렉션(알고리즘)

1. Reference-Counting

참조 개수를 카운팅하여 참조가 하나도 없으면 가비지로 판단하는 방법

 

한계 : 순환 참조

- 두개의 객체가 서로 참조하면 순환 구조가 생성되어, 가비지로 인직되지 않음

- IE 6,7 버전에서는 카운팅 방식을 사용했기 때문에 순환 참조로 인한 메모리 누수를 신경쓰며 개발하는 불편함이 있었습니다.

 

2. Mark-and-Sweep

가비지를 "닿을 수 없는 메모리"로 정의합니다.

roots 라는 전역변수의 집합부터 시작하여, roots가 참조한는 객체 -> 그 자식들이 참소하는 객체 -> ...

이런식으로 접근 가능한 객체들을 선별하고, 접근이 불가능한 객체들을 가비지로 판단하는 방법입니다.

 

- 실행 컨텍스트가 소멸하는 순간, 접근하기 불가능한 객체가 되기 때문에 순환 참조는 발생하지 않습니다.

- 2012년부터 모든 최신 브라우저들이 Mark-and-Sweep 알고리즘을 사용합니다.

 

Mark-and-Sweep의 3가지 상태

- White : 아직 가비지 컬렉터가 탐색하지 못한 상태

- Gray : 가바지 컬렉터가 탐색했으나, 해당 객체가 참조하는 객체들은 탐색하지 못한 상태

- Black : 가비지 컬렉터가 탐색했고, 해당 객체가 참조한는 객체들도 탐색 완료한 상태

 

Mark-and-Sweep의 동작 과정

1. Marking

- roots를 모두 회색으로 마킹하고, Deque에 push함

- Deque에서 pop front하여 객체를 꺼내어 검은색으로 마킹

- 검은색으로 마킹된 객체가 참조하는 객체들을 회색으로 마킹하고, push front

- Deque가 완전히 빌 때까지 이를 반복

- 최종적으로 검은색과 흰색으로 분류되고 Deque는 완전히 빔

 

2) Sweep

- 횐색으로 마킹된 객체들을 가비지로 인식하고 메모리를 해제

 

3) Compact

- 메모리의 파편화가 심해지지 않도록 메모리를 재배치하여 메모리를 확보

 

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Memory_Management

자바스크립트의 메모리 관리 - JavaScript | MDN

https://velog.io/@bumsu0211/JavaScript-Garbage-Collection

자바스크립트 가비지 컬렉션 (JavaScript Garbage Collection)

https://eblee-repo.tistory.com/52

[JavaScript] 메모리 관리와 가비지 컬렉션 동작 방식