JS 메모리 누수 방지

자바스크립트 메모리 누수의 흔한 이유들

클로저의 변수 참조(Capturing)

//문제상황 ---------------------------------------
function createClosure() {
    let capturedVar = new Array(1000000).fill('Data');

    return function() {
            console.log(capturedVar[0]);
        };
}

const closure = createClosure(); //capturedVar가 유지된다


//개선안------------------------------------------

function createClosure() {
    let capturedVar = new Array(1000000).fill('Data');

    return function() {
            console.log(capturedVar[0]);
            capturedVar = null; // 메모리 해제 로직 추가하기
    };
}

const closure = createClosure();
closure();

순환 참조

일반적인 객체 참조는 강한 참조(Strong Reference)로, 객체가 어느 한 곳이라도 참조되고 있다면 메모리에서 해제되지 않는다.
순환 참조는 서로를 참조하여 가비지 컬렉터를 혼란시키고 메모리 해제를 방해한다!

function CircularReference() {
    this.reference = this; // 자기 자신을 참조 = 순환 참조
}

let obj = new CircularReference();
obj = null; // 메모리가 해제되지 않을 수 있다!


// 개선안1
obj.reference = null; // 문제되는 참조 제거
obj = null; // 이제 메모리가 해제된다!

개선안2: 약한 참조

WeakMap, WeakSet, WeakRef..

약한 참조로 참조된 객체는 메모리 관리의 주체가 아니므로, 가비지 컬렉터가 해당 객체를 자유롭게 제거할 수 있다!
-> 단, 순회가 불가능하고 언제 제거될지 보장하지 않는다.

let weakMap = new WeakMap();

function CircularReference() {
    let obj = {};
    weakMap.set(obj, "This is a weak reference");
    return obj;
}
let obj = CircularReference();