this 키워드

function App() {
  this.contents = [];
}

App();

App 함수를 선언하고 this.contents로 contents라는 상태를 관리 하고자 했는데, 아래와 같은 에러가 발생했다.

this키워드를 이해하지 못해 발생한 에러였다.

 

this 키워드의 의미

this는 기본적으로 자신이 속해 있는 객체를 지칭한다.

const person = {
	sayHi() {
    	console.log(this); // person 객체를 가르킨다.
    }
}

따라서 전역함수에서의 this는 window 객체를 의미한다. 전역 scope에서 함수를 선언하면 window 객체에 추가되기 때문이다.

 

다만 strict mode일 때 전역함수에서 this를 사용하면 undefined가 출력된다. 위 에러가 발생한 이유도 이와 관련이 있다. index.js에서 App함수를 바로 선언했기 때문에 App은 전역함수가 된다. 따라서 this가 undefined를 가르켜 에러가 발생한다.

 

따라서 App함수를 선언한 다음 이를 사용해 새로운 객체를 생성해준다. 그러면 this가 객체를 가르키게 되어 에러가 발생하지 않는다.

function App() {
	this.contents = [];
}

const app = new App();