240728 this

const user = {
  firstName : "Zzangu",
  lastName  : "Shin",
  getFullName : function() {
    return `${user.firstName} ${user.lastName}`;
  },
};

console.log(user.getFullName()); // Zzangu Shin 

여기까지는 잘 출력됨.
근데 다른 객체에도 적용하고 싶어서 함수 외부에 분리하게 되면 다음과 같은 문제가 발생한다.

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

 const user = {
  firstName : "Zzangu",
  lastName  : "Shin",
  getFullName : getFullName,
 };

 const user2 = {
  firstName : "Misun",
  lastName  : "Bong",
  getFullName : getFullName,
 };

 console.log(user.getFullName()); // Zzangu Shin
 console.log(user2.getFullName()); // Zzangu Shin

user2.getFullName()가 Misun Bong이 아닌 Zzangu Shin을 출력
이런 상황에서 this 가 유용하게 사용된다.

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

함수 내의 user 부분을 this 로 바꿔주면 원하는 대로 출력이 되는 것을 확인할 수 있다.

this : 함수를 호출한 객체를 가리키는 키워드

• 코드를 작성할 때 값이 미리 결정되는 것이 아니라,
  함수가 호출될 때 어떤 객체가 함수를 호출했느냐에 따라 상대적으로 값이 변함
  (단, 화살표 함수에서는 화살표 함수가 선언되기 직전의 값을 가져옴)

실습 1

function printThisTitle() {
  console.log(this.title);
}

const courseA = {
  title: '프로그래밍 기초 in JavaScript',
  printTitle: printThisTitle,
};

const courseB = {
  title: '컴퓨터 개론',
  printTitle: courseA.printTitle,
};

const courseC = {
  title: '웹 퍼블리싱',
  printTitle: courseB.printTitle,
};

courseA.printTitle(); // 프로그래밍 기초 in JavaScript
courseB.printTitle(); // 컴퓨터 개론
courseC.printTitle(); // 웹 퍼블리싱

웹 브라우저에서 this가 사용될 때는 전역 객체, Window 객체를 가지게 됨.
하지만 객체의 메소드를 정의하기 위한 함수 안 에선 조금 다른 값을 갖게 되는데,
바로 메소드를 호출한 객체를 가리키게 된다.

주어진 문제에서 printThisTitle 함수는 this 키워드를 이용해서 이 함수를 호출한 객체의 title 프로퍼티를 출력하는 함수이다.
단 courseA에서 이 printThisTitle 함수를 printTitle이라는 이름의 메소드로 활용하고 있기에 courseA.printTitle()의 결과는 프로그래밍 기초 in JavaScript.

얼핏 보면 courseB는 CourseA의 메소드를 그대로 가져오고,
courseC도 그런 couserB의 메소드를 그대로 가져오니까 모두 프로그래밍 기초 in JavaScript 을 출력할 것 같지만 🙄
사실은 courseA, courseB, courseC 모두 printThisTitle 함수를 가져온 것과 같다.

그래서 결국은 각 메소드를 호출한 객체의 title 프로퍼티를 출력한다.

실습 2

const getFullName = () => `${this.firstName} ${this.lastName}`;

const user = {
  firstName: 'Ted',
  lastName: 'Chang',
  getFullName: getFullName,
};

console.log(user.getFullName());

• Arrow Function (화살표 함수)에서 this는 일반함수와 다르게 함수가 호출될 때 호출한 객체를 가리키지 않음
  -> getFullName에서 this는 window 객체를 가리키기 때문에 이 코드는 undefined undefined가 콘솔에 출력됨

실습 출처