(14) Modern JavaScript - this 키워드

자바스크립트에서  'this' 키워드는 함수를 호출한 객체를 가리키는 키워드이다.

console.log(this);

먼저 콘솔에 this 키워드를 출력해보면 window 객체가 출력되는 것을 확인할 수 있는데

보이는 것 그대로 브라우저 안에서 자바스크립트가 동작한다면 

전역 객체인 이 window 객체가 this의 기본값인데

사실 this는 일반적으로 그냥 사용되지 않고 함수 내부에서 주로 사용되며

특히 객체의 메소드를 만들 때 중요한 역할을 한다.

 

위와 같이 그냥 this를 사용하거나 함수를 선언하고서 

선언된 함수를 그냥 호출하게 되면 this는 기본값인 window 객체를 가리키게 된다.

한번 직접 객체를 생성해보자

---

const user = {
  firstName: "Seop",
  lastName: "Yee",
  getFullName: function () {
    return `${user.firstName} ${user.lastName}`;
  },
};
console.log(user.getFullName());

user 객체에 firstName과 lastName 프로퍼티를 만들고 

getFullName 메소드에서는 user 객체의 각 프로퍼티를 합쳐서

새로운 문자열을 return하게 코드를 적용하였으며 출력결과는 다음과 같다.

---

그리고 메소드를 다른 객체에도 적용하기위해 아래와 같이함수 외부로 분리를 하였다.

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

const user = {
  firstName: "Seop",
  lastName: "Yee",
  getFullName: getFullName,
};

const GameId = {
  firstName: "baxter",
  lastName: "yhs",
  getFullName: getFullName,
};

console.log(user.getFullName());
console.log(GameId.getFullName());

getFullName의 동작 부분에서는 계속해서 위 getFullName 함수의 user만 바라보기 때문에

GameId 객체에서 getFullName 메소드를 호출하더라도 

결과적으로는 user 객체의 프로퍼티만 사용하게 된다.

실제로 콘솔 결과를 보면 'Seop Yee'만 2번 출력이 될 것이다.

이런 문제점을 해결하기 위해 this 키워드를 활용한다.

 

---

this 키워드는  함수를 호출한 객체를 가리키는 키워드 라고 했을 때,

위 코드의 getFullName 함수의 user 부분을 this로 수정해보면

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

const user = {
  firstName: "Seop",
  lastName: "Yee",
  getFullName: getFullName,
};

const GameId = {
  firstName: "baxter",
  lastName: "yhs",
  getFullName: getFullName,
};

console.log(user.getFullName());
console.log(GameId.getFullName());

콘솔에 'Seop Yee' 가 두번 출력 되는 게 아니라 admin 객체도 같이 출력된 것을 확인할 수 있다.

반복하지만 this는 함수를 호출한 객체를 가리키는 키워드이기 때문에

코드를 작성할 때 값이 미리 결정되는 게 아니라

함수가 호출될 때 어떤 객체가 그 함수를 호출 했는지에 따라

상대적으로 값이 변하게 된다는 것이 this의 특징이다.

this 키워드를 좀 더 활용해보자.

---

const myObj = {
  content: "myObj",
  printThis: printThis,
};

const otherObj = {
  content: "otherObj",
  printThis: printThis,
};

myObj.printThis();
otherObj.printThis();

어떤 객체의 메소드로 호출이 되는 경우에는 함수를 호출하는 객체가 this에 담기기 때문에

똑같은 함수를 호출했지만 콘솔에는 각각 다른 객체가 출력 된 것을 확인할 수 있다.

 

---

그리고 일반 함수와 화살표함수의 가장 중요한 차이가 하나 있는데 

이 this 키워드와 연관이 있다.

const printThis = () => { //화살표 함수
  console.log(this);
};

const myObj = {
  content: "myObj",
  printThis: printThis,
};

const otherObj = {
  content: "otherObj",
  printThis: printThis,
};

myObj.printThis();
otherObj.printThis();

 

일반 함수와 화살표 함수는 this를 다루는 방식이  서로 다르단 점인데

위 코드를 실행해보면 두 결과가 window 객체를 출력하는 것을 확인할 수 있다.

 

화살표 함수에서 this 값은 일반 함수 처럼

호출한 대상에 따라 상대적으로 변하는 게 아니라 

화살표 함수가 선언되기 직전에 그때 유효한 this 값과 똑같은 값을 가지고 동작하게 된다.

위 코드에서 화살표 함수가 선언되기 직전의 this는 window 객체이기 때문에

콘솔 결과가 window 객체가 출력된 것이다.

 

이런 특징 때문에 특별히 객체에 메소드를 만들 때는

화살표 함수보다 일반 함수를 작성하는 것으로 권장된다.

---

이렇게 this 키워드를 

외부에서 여러 객체에 공통적으로 사용되는 메소드를 만들 때 뿐만 아니라

객체 내부에서 메소드를 만들 때도 

메소드가 속해 있는 객체의 프로퍼티가 필요한 상황에서 충분히 활용할 수 있다.