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

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

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

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

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

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

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

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

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

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

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

각 항목에 숫자가 쓰여 있는 ul 목록이 주어집니다. 어떤 li를 클릭해도 그 숫자가 1씩 증가하도록 만드세요.

이전 문제를 수정하여, 각 li가 자신의 값을 처음 클릭할 때만 증가하도록 만드세요.

이전 문제를 수정하여, 각 li의 값이 10보다 작을 때만 자신의 값을 증가하도록 만드세요.