자바스크립트에서 this의 장점

지금까지 설명한 내용으로는 this의 특별한 장점이 명확하게 보이지 않습니다. 결국 이벤트 핸들러 함수 내부에서는 우리의 요소에 접근할 수 있으니까요 — elem 변수가 우리의 함수 func에 대해 전역 변수가 될 테니까요:

let elem = document.querySelector('#elem');
elem.addEventListener('click', func);

function func() {
	// 여기서 우리 요소를 가진 변수 elem에 접근 가능합니다
}

그리고, this의 내용과 변수 elem의 내용이 우리의 경우 동일하다는 것은 쉽게 알 수 있습니다:

let elem = document.querySelector('#elem');
elem.addEventListener('click', func);

function func() {
	console.log(elem === this); // true를 출력합니다
}

그렇다면 this의 특별한 장점은 무엇일까요? 이것은 여러 요소가 있고, 각 요소에 동일한 함수가 연결되어 있을 때 나타납니다.

예제를 통해 살펴보겠습니다. 3개의 버튼이 있다고 가정해 봅시다:

<input id="button1" type="submit" value="text1">
<input id="button2" type="submit" value="text2">
<input id="button3" type="submit" value="text3">

이것들을 변수에 참조로 가져옵니다:

let button1 = document.querySelector('#button1');
let button2 = document.querySelector('#button2');
let button3 = document.querySelector('#button3');

이 버튼들에 동일한 함수를 연결합니다:

button1.addEventListener('click', func);
button2.addEventListener('click', func);
button3.addEventListener('click', func);

그리고 함수 내부에서 this.value를 출력합니다:

function func() {
	console.log(this.value);
}

결과적으로, 우리에게는 세 개의 버튼이 있습니다. 각 버튼을 클릭하면 함수 func가 호출됩니다. 이때, 매 클릭마다 this는 이벤트가 발생한 해당 버튼에 대한 참조를 담게 됩니다.

즉, 매번 클릭할 때마다 콘솔에는 클릭이 발생한 버튼의 value가 출력되지만, 이를 수행하는 것은 동일한 함수 func입니다! 이것이 바로 this 사용의 장점입니다.

어떤 텍스트가 있는 5개의 단락이 주어져 있습니다. 어떤 단락을 클릭하든 그 텍스트의 끝에 느낌표를 추가하세요.

어떤 숫자들이 적힌 3개의 입력 필드가 주어져 있습니다. 어떤 입력 필드에서든 포커스를 잃으면(lost focus) 그 안에 있는 숫자를 제곱하세요.