this

일반 함수와 화살표 함수에 따라 다르게 정의된다.
일반 함수는 호출위치에서 정의되고,
화살표 함수는 this 가 자신이 선언된 렉시컬 범위에서 정의된다.

화살표 함수와 일반함수에서 사용되는 this의 값이 서로 다르다!

일반함수

function user() {
  this.firstName = 'Neo'
  this.lastName = 'Anderson'
  
  return {
    firstName: 'Heropy',
    lastName: 'Park',
    age: 85,
    getFullName: function () {
      return `${this.firstName} ${this.lastName}`
    }
  }
}

const u = user()
console.log(u.getFullName()) // 'Heropy Park'

화살표 함수

function user() {
  this.firstName = 'Neo'
  this.lastName = 'Anderson'
  
  return {
    firstName: 'Heropy',
    lastName: 'Park',
    age: 85,
    getFullName: () => {
      return `${this.firstName} ${this.lastName}`
    }
  }
}

const u = user()
console.log(u.getFullName()) // 'Neo Anderson'

일반 함수의 경우는 변수 u를 통해서 user()의 getFullName()을 호출했다. 이때 호출된 위치에서 user()를 호출할때의 리턴 값중에서 firstName과 lastName의 값이 선언되어있으며 getFullName은 해당 값들을 리턴하게 되는 것이다.

반대로 화살표 함수의 경우는 this 가 자신이 선언된 함수 범위에서 정의된다고 했으므로 user()함수내부에서 fisrtName과 lastName을 리턴하는 것이므로 Nep Anderson이 나오는 것이다