클로저 메모리 누수

Javascript 는 Java와 같이 가비지 컬렉터에 의해 메모리가 해제되어 크게 메모리 관리에 대해 신경을 쓰지 않게 된다.

그러나 고급 개발자로 나아가고 대규모의 프로젝트를 진행하는데에 있어 중요한 부분이 메모리 관리가 아닐까 싶다.

흔히 사용했던 아래와 같은 코드가 순환 참조로서 메모리 누출을 일으킨다고 한다.

IE는 완전히 다시 시작되기 전까지는 el와 o에 의해 사용되는 메모리를 반환하지 못한다.

function leakMemory() {
    var el = document.getElementById('el');
    var o = { 'el': el };
    el.o = o;
}

해당 코드는 아래와 같이 해결할 수 있다고 한다.

function addHandler() {
    var el = document.getElementById('el');
    el.onclick = function() {
        this.style.backgroundColor = 'red';
    }
    el = null;
}

또다른 클로저를 이용하는 다른 방법.

function addHandler() {
    var clickHandler = function() {
        this.style.backgroundColor = 'red';
    }
    (function() {
        var el = document.getElementById('el');
        el.onclick = clickHandler;
    })();
}

* 참고
https://developer.mozilla.org/ko/docs/A_re-introduction_to_JavaScript