자바스크립트의 메모리 관리 (가비지 컬렉션)

 자바스크립트에서는 개발자가 메모리를 직접적으로 해제하지 않고도 자동으로 메모리를 관리해 주는 언어이다.
메모리 관리는 크게 다음 두 가지로 나눌 수 있다.

1. 메모리 할당 (Memory Allocation)
메모리 할당은 단순하게 변수를 선언하고 값을 할당할 때 발생된다.
 
2. 가비지 컬렉션 (Garbage Collection)
가비지 컬렉션은 할당받은 메모리가 더 이상 사용하지 않을 때 메모리에서 해제하여 메모리 누수를 방지하는 과정이다.
자바스크립트에서는 Mark-and-Sweep 알고리즘을 사용하여 가비지 컬렉션을 수행한다.
 

• 마킹 단계: 모든 객체가 "도달 가능"(reachable)한지 여부를 결정합니다. 도달 가능한 객체는 루트(root) 객체(예: 전역 객체, 스택에 있는 변수들)에서 시작하여 참조를 따라가며 표시됩니다.
• 스위핑 단계: 도달 불가능한 객체가 메모리에서 해제됩니다.

// 객체 생성 및 참조
let obj1 = { key: "value" };
let obj2 = obj1;

// obj1과 obj2가 obj1을 참조하므로 도달 가능

obj1 = null;
// obj2가 여전히 obj1을 참조하므로 도달 가능

obj2 = null;
// 이제 obj1을 참조하는 변수가 없으므로 도달 불가능해져 가비지 컬렉션 대상이 됨

 
 
위 예제로 알 수 있는 건 개발자는 직접적으로 메모리를 해제할 수는 없지만
불필요한 변수에 null을 할당하여 간접적으로 메모리를 해제할 수 있다.
 

메모리 누수

메무리 누수(Memory Leak)는 사용하지 않는 메모리가 해제되지 않고 유지되는 상황을 뜻한다.
메모리 누수는 애플리케이션의 성능저하 또는 메모리가 계속 쌓이면 크래시 현상으로 이어질 수 있다.

크롬 브라우저에서 메모리가 부족할때 보여지는 화면

 
메모리 누수가 발생하지 않게 신경 써야 될 것들
1. 전역변수를 과도하게 선언하지 않는다.
2. 타이머, 이벤트 리스너는 생성 이후 사용하지 않을 땐 해제한다.

let timerId = setInterval(() => {
  console.log("This runs every second");
}, 1000);

// 타이머 해제
clearInterval(timerId);

let button = document.getElementById("myButton");
function handleClick() {
  console.log("Button clicked");
}
button.addEventListener("click", handleClick);

// 이벤트 리스너 해제
button.removeEventListener("click", handleClick);

 3. 깊은 복사 (deep copy) 사용 자제
 

결론

자바스크립트에서 메모리 관리는 자동으로 이루어지지만, 메모리 사용 패턴을 이해하고 최적화하는 것은 중요합니다. 이를 통해 메모리 누수를 방지하고 애플리케이션의 성능을 최적화할 수 있습니다. 효율적인 메모리 관리를 위해 변수를 필요 이상으로 오래 유지하지 않고, 사용한 리소스를 적절히 해제하는 습관을 기르는 것이 중요합니다.