JavaScript 화살표 함수 핸들러에서의 this 오류

최근에는 일반 함수 대신 화살표 함수를 모든 곳에 사용하는 것이 유행이 되었습니다. 그러나 이러한 함수에는 함정이 있습니다 - 그들은 this를 유지하지 않습니다. 이로 인해 발생할 수 있는 문제를 살펴보겠습니다.

버튼이 있다고 가정해 봅시다:

<button>text</button>

이 버튼에 대한 참조를 변수에 저장합니다:

let button = document.querySelector('button');

화살표 함수를 사용하여 버튼에 이벤트 핸들러를 추가합니다:

button.addEventListener('click', () => {
	console.log(this.textContent);
});

여기서 우리를 기다리고 있는 놀라움이 있습니다: 화살표 함수 내부의 this는 이벤트가 발생한 요소를 참조하지 않습니다.

이 문제를 어떻게 해결할 수 있는지 살펴보겠습니다.

첫 번째 해결책

this 사용을 포기하고 이벤트가 바인딩된 변수를 사용할 수 있습니다:

button.addEventListener('click', () => {
	console.log(button.textContent);
});

event.target를 통해 이벤트가 바인딩된 요소를 얻을 수 있습니다:

button.addEventListener('click', (event) => {
	console.log(event.target.textContent);
});

화살표 함수를 포기하고 일반 함수를 사용할 수 있습니다:

button.addEventListener('click', function() {
	console.log(this.textContent);
});