JavaScript에서의 컨텍스트 기본

내부에서 this를 사용하는 func라는 함수가 있다고 가정해 봅시다:

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

이 함수에서 this는 무엇을 가리킬까요? 우리는 모릅니다. 그리고 JavaScript도 모릅니다. 함수 자체도 모릅니다. 즉, 함수가 생성되는 순간에 this가 정확히 무엇을 가리킬지 정의되지 않습니다. 이것은 이 함수가 호출될 때에만 결정됩니다.

어떤 인풋이 있다고 가정해 봅시다:

<input id="elem" value="text">

이 인풋에 func 함수를 바인딩하여 인풋이 포커스를 잃을 때 실행되도록 합시다. 이제 함수가 실행되는 순간 this는 우리의 인풋을 가리키게 됩니다:

let elem = document.querySelector('#elem');

elem.addEventListener('blur', func);
function func() {
	console.log(this.value); // 포커스가 해제되면 'text'를 출력함
}

그런데 인풋이 하나가 아니라 여러 개일 수도 있습니다:

<input id="elem1" value="text1">
<input id="elem2" value="text2">

그리고 이러한 각 인풋에 우리의 func 함수를 바인딩할 수 있습니다. 이 경우 첫 번째 요소에 대해서는 함수가 호출되는 순간 this가 그 요소를 가리키고, 두 번째 요소에 대해서는 그 요소를 가리킵니다.

실제로 이것은 함수 내부의 this가 우리가 어떤 인풋에서 포커스를 잃었는지에 달려 있다는 것을 의미합니다:

let elem1 = document.querySelector('#elem1');
elem1.addEventListener('blur', func);

let elem2 = document.querySelector('#elem2');
elem2.addEventListener('blur', func);

function func() {
	console.log(this.value); // 'text1' 또는 'text2'를 출력함
}

기본적으로 this의 이러한 특성은 매우 편리합니다 - 우리는 단 하나의 함수만을 생성하고 그것을 임의의 수의 인풋에 바인딩할 수 있습니다. 만약 this가 이벤트가 발생한 요소를 가리키지 않았다면, 우리는 이것을 할 수 없었을 것입니다 - 각 인풋마다 동일한 코드를 가진 자체 함수를 만들어야 했을 것입니다!