익명함수의 메모리 누수

function printMessage(){
  const value = messageInput.value();
}

function addListener(){
  btn1.addEnverntListener('click', printMessage);
}

btn2.addEventListener('click', addListener);

함수를 정의하면 브라우저의 힙 메모리에 저장되어 하나만 존재하게 된다.

위의 click listener 함수는 해당 함수에 대한 참조값을 지니게 되고, 이미 등록된 함수중에 참조가 있으면 추가하지 않는다.

단, 익명함수로 추가하게 되면 실행될 때 마다 힙에 새롭게 추가된다.(서로 다른 참조값을 가진다.)

(참고 : https://velog.io/@wangjh789/%EC%9D%B5%EB%AA%85%ED%95%A8%EC%88%98%EC%99%80-%EB%A9%94%EB%AA%A8%EB%A6%AC-%EB%88%84%EC%88%98)

 

 

const els = document.getElementsByTagName('*');

// 상황 1
for(let i=0 ; i < els.length; i++){
  els[i].addEventListener("click", function(e){/*do something*/}, false);
}

// 상황 2
function processEvent(e){
  /* do something */
}

for(let i=0 ; i < els.length; i++){
  els[i].addEventListener("click", processEvent, false);
}

• 상황 1의 경우에는 반복문의 매 반복마다 새로운 익명 처리기 함수가 생성된다.
  • 익명 함수에 대한 참조를 유지하지 않으므로 removeEventListener()를 호출할 수 없다.
• 반면 상황 2에서는 사전에 정의한 함수를 이벤트 처리기로 사용하므로 처리기 함수를 하나만 사용하고, 따라서 더 작은 메모리 공간만 사용합니다. 
  • processEvent가 처리기 함수를 가리키므로 myElement.removeEventListener("click", processEvent, false)를 할 수 있다.