This keyword

this 키워드
: this는 각 실행 컨텍스트(즉, 함수마다)마다 생성되는 특수한 변수이다. 함수가 호출될 때 그 함수의 "소속"을 나타낸다.중요한 점은 this가 정적인 값이 아니라는 것이다. this의 값은 함수가 호출되는 방식에 따라 달라지며, 함수가 실제로 호출될 때만 정확한 값이 결정된다.아래에 this의 값이 어떻게 정해지는지 정리해두었다.

1. 객체 안에서 메서드로 호출될 때
this는 메서드를 호출한 객체를 가리킨다.

2. 일반 함수
this는 undefined인데, strict mode일 때만 그렇고, 아닐 때는 브라우저의 window 객체를 가리킨다.

3. 화살표 함수
화살표 함수(arrow function)에서의 this는 주변에 있는 부모 함수의 this를 가리킨다.

4. 이벤트 리스너
이벤트 리스너에서의 this는 핸들러가 연결된 그 이벤트의 대상(즉, 이벤트가 발생한 요소)을 가리킨다.

아래 코드와 함께 구체적으로 이해해보자.

함수 밖에서 그냥 console.log(this)를 써주면 결과는 아래와 같이 글로벌(윈도우) 객체가 나온다.

const calcAge = function (birthYear) {
  console.log(2037 - birthYear);
  console.log(this);
};
calcAge(1991);

이렇게 일반 함수에서 this를 호출하게 되면 undefined이라고 콘솔에 출력된다.(strict mode일때만)

그럼 아래의 화살표 함수일때를 보자.

const calcAgeArrow = birthYear => {
  console.log(2037 - birthYear);
  console.log(this);
};
calcAgeArrow(1980);

화살표 함수는 자체적으로 this 값을 가지지 않기 때문에 부모 함수의 this를 따른다. 여기서는 부모가 window이므로 this는 window object을 갖게 된다. 다음으로 object안에 있는 method일때의 코드를 보자.

const jonas = {
  year: 1991,
  calAge: function () {
    console.log(this);
    console.log(2037 - this.year);
  },
};
jonas.calAge();

const matilda = {
  year: 2017,
};

matilda.calAge = jonas.calAge;
matilda.calAge();

jonas 객체 안에 메서드 calAge가 있는 것을 볼 수 있다. 따라서 console.log(this)의 값이 아래와 같이 메서드의 객체 jonas가 나오게 된다.

여기서 jonas.calAge()로 메서드를 호출하면 this는 jonas 객체를 가리킨다. 그래서 this.year은 1991이 되고 값은 2037 - 1991이 된다. 그런데 밑에 matilda라는 객체를 추가하고 거기에 calAge 메서드를 jonas의 calAge처럼 추가해주었다. 이때에는 matilda.calAge()는 matilda 객체에 있는 메서드 calAge()를 호출하므로, 여기서 this는 matilda 객체를 가리키고, 값은 2037 - 2017이 된다.