JavaScript에서 바인딩되지 않은 함수의 컨텍스트

함수에 this를 지정했지만 어떤 요소에도 바인딩하지 않으면 어떻게 되는지 살펴보겠습니다. 다음과 같이:

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

func();

이 경우 결과는 엄격 모드 여부에 따라 달라집니다. 비엄격 모드라면, this에는 window에 대한 참조가 저장됩니다:

function func() {
	console.log(this); // window에 대한 참조
}

func();

엄격 모드라면, this에는 undefined가 저장됩니다:

"use strict";

function func() {
	console.log(this); // undefined
}

func();

위에서 설명한 내용으로 보면 엄격 모드에서는 this가 항상 undefined일 것 같습니다. 그렇지 않습니다! 함수 밖에서 단순히 this를 출력하면, 모드와 관계없이 window에 대한 참조가 들어 있습니다:

"use strict";
console.log(this); // this에는 window에 대한 참조가 있음

결론

어떤 함수에서든 this를 작성할 수 있으며, 이는 JavaScript의 어떤 오류도 일으키지 않습니다. 그러나 이 this에 정확히 무엇이 들어갈지는 함수가 호출되는 순간까지 정의되지 않습니다. 게다가 함수가 호출될 때마다 this는 다른 값을 가질 수 있습니다. 모든 것은 함수가 호출된 컨텍스트에 달려 있습니다.