WeakRef와 FinalizationRegistry — 자바스크립트의 메모리 관리

let user = { name: '홍길동', age: 25 };
// { name: '홍길동', age: 25 } 객체는 user 변수를 통해 도달 가능

user = null;
// 이제 해당 객체에 도달할 방법이 없음 → GC 대상

function createCycle() {
  const objA = {};
  const objB = {};
  objA.ref = objB; // A → B
  objB.ref = objA; // B → A
  // 함수가 끝나도 서로 참조하므로 Reference Counting에서는 GC 안 됨
  // Mark-and-Sweep에서는 루트에서 도달 불가능하므로 GC됨
}
createCycle();

const cache = new WeakMap();

function process(obj) {
  if (cache.has(obj)) {
    return cache.get(obj);
  }
  const result = /* 비용이 큰 계산 */ obj.value * 2;
  cache.set(obj, result);
  return result;
}

let data = { value: 42 };
process(data); // 계산 후 캐시에 저장
process(data); // 캐시에서 가져옴

data = null; // data 객체가 GC되면, cache의 해당 엔트리도 자동 제거

const visited = new WeakSet();

function processNode(node) {
  if (visited.has(node)) return; // 이미 방문한 노드
  visited.add(node);
  // ... 처리 로직
}

const elementData = new WeakMap();

function setData(element, data) {
  elementData.set(element, data);
}

function getData(element) {
  return elementData.get(element);
}

const button = document.getElementById('myButton');
setData(button, { clicks: 0, lastClicked: null });

// DOM에서 button이 제거되면, elementData의 해당 엔트리도 자동 정리

let target = { name: '큰 데이터', data: new Array(1000000) };
const weakRef = new WeakRef(target);

// 약한 참조를 통해 객체에 접근
console.log(weakRef.deref()); // { name: '큰 데이터', data: [...] }

target = null; // 강한 참조 제거

// GC 이후
console.log(weakRef.deref()); // undefined (GC가 수거한 경우)

// 좋은 패턴
function doSomething(weakRef) {
  const obj = weakRef.deref();
  if (obj) {
    // obj를 사용 — 이 블록 안에서만
    console.log(obj.name);
  }
  // 블록을 벗어나면 obj 참조가 사라짐
}

// 나쁜 패턴
let cached = weakRef.deref(); // 강한 참조가 되어 GC 방해

class WeakCache {
  #cache = new Map();

  set(key, value) {
    this.#cache.set(key, new WeakRef(value));
  }

  get(key) {
    const ref = this.#cache.get(key);
    if (!ref) return undefined;

    const value = ref.deref();
    if (!value) {
      // GC로 수거됨 → Map에서도 제거
      this.#cache.delete(key);
      return undefined;
    }
    return value;
  }

  // 수거된 엔트리를 정리 (FinalizationRegistry와 함께 쓰면 자동화 가능)
  cleanup() {
    for (const [key, ref] of this.#cache) {
      if (!ref.deref()) {
        this.#cache.delete(key);
      }
    }
  }
}

const registry = new FinalizationRegistry((heldValue) => {
  console.log(`객체가 수거됨, 정리 대상: ${heldValue}`);
  // 외부 리소스 정리, 캐시 엔트리 삭제 등
});

let obj = { name: '임시 객체' };
registry.register(obj, 'obj의 식별자'); // 두 번째 인자는 콜백에 전달될 값

obj = null; // 강한 참조 제거 → 나중에 GC가 수거하면 콜백 실행

const registry = new FinalizationRegistry((id) => {
  // 외부 리소스 정리
  externalResourceMap.delete(id);
});

let resource = createExternalResource();
const token = {}; // 등록 해제용 토큰

registry.register(resource, resource.id, token);

// 나중에 수동으로 정리한 경우, 콜백이 불필요해지면
registry.unregister(token);

class ResourceManager {
  #refs = new Map();
  #registry = new FinalizationRegistry((key) => {
    console.log(`리소스 ${key} 해제됨`);
    this.#refs.delete(key);
  });

  add(key, resource) {
    const ref = new WeakRef(resource);
    this.#refs.set(key, ref);
    this.#registry.register(resource, key, ref);
  }

  get(key) {
    const ref = this.#refs.get(key);
    if (!ref) return undefined;
    return ref.deref();
  }
}

// 실수로 전역 변수 생성 (strict mode가 아닐 때)
function handler() {
  leakedData = new Array(1000000); // var/let/const 빠짐 → 전역 변수
}

// 누수 패턴
function setup() {
  const data = loadHugeData();
  document.getElementById('btn').addEventListener('click', () => {
    console.log(data); // 클로저가 data를 참조 → GC 불가
  });
}

// 해결: 리스너 제거
function setup() {
  const data = loadHugeData();
  const handler = () => console.log(data);
  const btn = document.getElementById('btn');
  btn.addEventListener('click', handler);

  // 정리
  return () => btn.removeEventListener('click', handler);
}

// 누수 패턴
const data = loadData();
setInterval(() => {
  updateUI(data); // data에 대한 참조가 영원히 유지됨
}, 1000);

// 해결: clearInterval
const timerId = setInterval(() => updateUI(data), 1000);
// 필요 없어지면
clearInterval(timerId);

function createProcessor() {
  const hugeArray = new Array(1000000).fill('*');

  return function process(index) {
    return hugeArray[index]; // 클로저가 hugeArray 전체를 참조
  };
}

const processor = createProcessor();
// processor가 살아있는 한 hugeArray도 메모리에 유지됨

// 누수 패턴
const elements = [];
function addElement() {
  const div = document.createElement('div');
  document.body.appendChild(div);
  elements.push(div); // 배열에도 참조 유지
}

function removeElement() {
  const div = elements.pop();
  document.body.removeChild(div);
  // DOM에서는 제거했지만 elements 배열에서 참조가 남아있었다면 누수
}

// 메모리 사용량 확인 (Node.js)
console.log(process.memoryUsage());
// {
//   rss: 30000000,        // 전체 메모리
//   heapTotal: 6000000,   // 힙 전체 크기
//   heapUsed: 4000000,    // 사용 중인 힙
//   external: 1000000     // 외부 메모리 (Buffer 등)
// }

// 브라우저에서 (비표준이지만 Chrome에서 사용 가능)
console.log(performance.memory);