JavaScript에서 익명 함수 언바인딩하기

이제 우리의 단락에 익명 함수가 바인딩되어 있다고 가정해 봅시다:

javascriptlet elems = document.querySelectorAll('p');

for (let elem of elems) {
  elem.addEventListener('click', function() {
    console.log(this.textContent);
  });
}

이 단락을 클릭한 후에 이 함수를 단락에서 언바인딩하고 싶다고 가정해 봅시다. 그러나 문제가 있습니다: 함수에 이름이 없으므로 언바인딩하기 위해 그 이름으로 함수를 참조할 수 없습니다.

이 문제를 해결하려면 함수에 이름을 부여하여 명명된 함수 표현식으로 만들어야 합니다. 이렇게 해봅시다:

javascriptlet elems = document.querySelectorAll('p');

for (let elem of elems) {
  elem.addEventListener('click', function func() { // 함수에 이름을 부여함
    console.log(this.textContent);
  });
}

이제 이 함수는 그 자체 내부에서 언바인딩할 수 있습니다:

javascriptlet elems = document.querySelectorAll('p');

for (let elem of elems) {
  elem.addEventListener('click', function func() {
    console.log(this.textContent);
    this.removeEventListener('click', func); // 함수 언바인딩
  });
}