Desvinculación de funciones anónimas en JavaScript

Supongamos que ahora a nuestros párrafos está vinculada una función anónima:

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

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

Supongamos que queremos desvincular esta función del párrafo después de hacer clic en este párrafo. Sin embargo, nos enfrentamos a un problema: la función no tiene nombre, lo que significa que no podremos referirnos a ella por ese nombre para desvincularla.

Para resolver el problema necesitamos darle un nombre a la función, convirtiéndola en una expresión funcional con nombre. Hagamos esto:

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

for (let elem of elems) {
  elem.addEventListener('click', function func() { // le dimos nombre a la función
    console.log(this.textContent);
  });
}

Ahora esta función se puede desvincular dentro de ella misma:

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

for (let elem of elems) {
  elem.addEventListener('click', function func() {
    console.log(this.textContent);
    this.removeEventListener('click', func); // desvinculamos la función
  });
}