익명함수와 메모리 누수

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

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

btn2.addEventListener('click', addListener);

위 코드는 btn2가 클릭되면 btn1에 클릭 이벤트가 추가되는 로직이다.
btn2를 여러번 눌러도 btn1에는 printMessage의 로직이 한 번만 추가된다.왜 그럴까?
함수를 정의하면 브라우저의 힙 메모리 에 저장되어 하나만 존재하게 된다. 그렇기 때문에 click이벤트는 해당 함수의 참조값을 가지게 되고 브라우저는 이미 등록된 함수 중에 같은 참조가 있을 시 추가하지 않는다.

function addListener(){
  btn1.addEnverntListener('click', function(){
  	const value = messageInput.value();
  });
}

btn2.addEventListener('click', addListener);

만약 익명함수로 이벤트를 추가한다면?
익명함수는 실행될 때마다 힙에 새롭게 추가된다. (서로 다른 참조값을 가진다.)
그렇기 때문에 이 경우 btn2를 여러번 누를 때마다 btn1의 클릭이벤트는 늘어나게 되어 메모리 누수의 위험이 있다.