[JavaScript] this 객체

브라우저에 다음과 같이 입력하면,

console.log(this);

전역객체인 Window 객체가 this 의 기본값이 된다.

 

---

 

const user = {
  firstName: 'Tess',
  lastName: 'Jang',
  getFullName: function() {
    return `${user.firstName} ${user.lastName}`
  },
};

console.log(user.getFullName()); // Tess Jang

위 메소드를 다른 객체에도 적용하고 싶어서

 

function getFullName() {
  return `${user.firstName} ${user.lastName}`
}

const user = {
  firstName: 'Tess',
  lastName: 'Jang',
  getFullName: getFullName,
};

const admin = {
  firstName: 'Alex',
  lastName: 'Kim',
  getFullName: getFullName,
};

console.log(user.getFullName()); // Tess Jang
console.log(admin.getFullName()); // Tess Jang

위와 같이 실행시키면, 계속해서 user 객체만 바라보기때문에 결과적으로 user 객체의 프로퍼티만을 사용하게 된다.

따라서 Tess Jang 만 두번 출력됨. 

 

 

이런상황에서 This 객체를 사용할 수 있다.

function getFullName() {
  return `${this.firstName} ${this.lastName}`
}

const user = {
  firstName: 'Tess',
  lastName: 'Jang',
  getFullName: getFullName,
};

const admin = {
  firstName: 'Alex',
  lastName: 'Kim',
  getFullName: getFullName,
};

console.log(user.getFullName()); // Tess Jang
console.log(admin.getFullName()); // Alex Kim

자바스크립트에서 this 는 함수를 호출한 객체를 가르킨다. 함수가 호출될 때, 어떤 객체가 함수를 호출했는지에 따라 값이 상대적으로 변경됨.

 

---

일반함수와 Arrow Function 은 this 를 다루는 방식이 서로 다른데,

Arrow Function 에서의 this 값은 일반함수처럼 호출한 대상에따라 바뀌는 것이 아닌, Arrow function 이 선언되기 직전 유효한 this 값과 같이 나타남.

 

따라서 일반함수로 사용하는것이 권장된다.