JavaScript 메모리 관리와 가비지 컬렉션

🧠 메모리 관리와 가비지 컬렉션

모든 프로그램은 데이터를 저장하기 위해 메모리를 사용합니다. 자바스크립트는 개발자가 메모리를 직접 해제하지 않아도 되도록 자동 메모리 관리 시스템을 제공합니다. 그 중심에는 가비지 컬렉션(Garbage Collection)이 있습니다.

📌 메모리 사용 흐름

1. 할당(Allocation): 변수를 선언하고 객체를 생성할 때 메모리를 할당받습니다.
2. 사용(Use): 데이터를 읽고 쓰는 과정에서 메모리를 사용합니다.
3. 해제(Release): 더 이상 사용되지 않는 메모리는 자동으로 정리됩니다 (GC).

♻️ 가비지 컬렉션이란?

가비지 컬렉션은 더 이상 도달할 수 없는(unreachable) 객체를 찾아 자동으로 메모리에서 제거하는 기능입니다.

✅ 도달할 수 없는 객체란?

객체가 변수나 다른 객체의 속성을 통해 참조되지 않는 상태를 의미합니다. 즉, 어디에서도 접근할 수 없는 객체는 제거 대상이 됩니다.

let user = {
  name: "Alice"
};

user = null; // 이제 객체는 메모리에서 해제될 수 있음

🔍 GC 알고리즘: 마크 앤 스위프 (Mark and Sweep)

1. GC는 루트(root) 객체에서 시작하여 도달 가능한 객체를 모두 마크(mark)합니다.
2. 도달할 수 없는 객체들은 스위프(sweep) 단계에서 메모리에서 제거됩니다.

🌳 루트 객체란?

• 전역 객체 (브라우저에서는 window)
• 현재 실행 중인 함수의 지역 변수 및 매개변수
• 콜스택에 존재하는 참조 등

⚠️ 메모리 누수가 생기는 경우

GC는 자동이지만 완벽하진 않습니다. 아래와 같은 경우는 의도치 않은 참조로 인해 메모리 누수가 발생할 수 있습니다:

• 전역 변수 남용
• 이벤트 리스너 제거 안 함
• 클로저로 인한 참조 유지
• 타이머(setInterval) 정리하지 않음

❌ 예: 이벤트 리스너 미삭제

function attach() {
  const element = document.getElementById("btn");
  element.addEventListener("click", () => {
    console.log("clicked!");
  });
}
// element는 계속 참조되므로 GC 대상이 아님

✅ 해결 방법

이벤트 리스너는 반드시 removeEventListener로 정리하세요.

🧠 요약

• 자바스크립트는 자동 메모리 관리 언어이다.
• 도달할 수 없는 객체는 가비지 컬렉션에 의해 제거된다.
• Mark and Sweep 알고리즘으로 GC가 동작한다.
• 클로저, 전역 변수, 이벤트 리스너 미삭제는 메모리 누수의 원인이다.