이 개체는 저것일까 아니면 그것인가

동적 스코프

JavaScript 함수의 동적 스코프는 어떻게 어디서 선언됐는지 상관없고, 오직 어디서 호출됐는지 연관된다.

아래 코드를 살펴보자.

function logger() {
  console.log(a);
}
const a = 2;
logger();

어디서 호출 되었는지를 생각하면, logger() 가 실행됐을 때 다음 코드의 결과는 undefined가 아니라 2를 출력한다.

Lexical this

화살표 함수는 장황한 function의 키워드의 줄임말로 흔히 언급된다. 하지만 완전히 다른 점으로는 this가 지칭하는 스코프에 대한 일반 규칙을 폐기하고, 대신 자신 가까이의 함수로 둘러싼 정적 스코프에서 this 값을 받아온다.

const person = {
  weight: 100,
  getWeight: () => this.weight,
};

console.log(person.getWeight());

출력 값은 undefined이다. 왜냐하면 위 경우는 멤버 함수 getWeight 를 둘러싼 함수 스코프가 존재하지 않아서 this가 빈 객체{}를 갖게 되기 때문이다.

const person = {
  weight: 100,
  getWeight: function() { return this.weight },
};

console.log(person.getWeight());

function 키워드로 멤버 함수 getWeight 를 선언했으면 this는 person 인스턴스를 제대로 가리켜서 100을 정상적으로 출력 했을 것이다.

원래 의도하는 결과를 화살표 함수로 나오게 할려면 객체가 아닌 함수로 getWeight를 둘러싸야 한다.

function person() {
  this.weight = 100;
  this.getWeight = () => this.weight;
}

const npc = new person();
console.log(npc.getWeight());

참고한 문서