3.1.3 구독 해제: 명시적 취소

메모리가 할당될 때만큼 애플리케이션에 메모리 할당이 해제될 때도 중요합니다. 예를 들어 화려한 자바스크립트 UI는 잠재적으로 수천 개의 요소에 이벤트 핸들러를 바인딩합니다. 사용자가 UI의 특정 부분과 상호 작용한 후에는 해당 객체가 존재할 필요가 없으며 메모리를 차지할 이유도 없습니다. 앞에서 설명한 것처럼 가비지 컬렉터는 상당히 똑똑하게 메모리를 정리합니다. 하지만 아쉽게도 해당 객체에 대한 참조가 사용되지 않거나 네이티브 이벤트 처리 코드에서 자주 발생하는 참조 주기가 없는 경우에만 작동할 수 있습니다.

객체를 초기화한 다음에 객체에 대한 참조를 제거하지 않은 채 잊어버리기 때문에 애플리케이션에서 해당 메모리를 복구하지 못하게 됩니다. 작은 스크립트에서는 문제가 되지 않지만, 클라이언트가 많은 최신 애플리케이션에서는 문제가 될 수 있습니다. 예를 들어 다음 코드에서 메뉴 항목에서 마우스 오른쪽 버튼 클릭 이벤트를 수신하여 사용자 지정 컨텍스트 메뉴를 표시하면 문제를 확실히 볼 수 있습니다.

document.addEventListener('mouseup', e => {
  if (e.button === 2)
    showCustomContextMenu();
  e.stopPropagation();
});