객체 메서드 안에서 만든 화살표 함수와 일반 함수의 this가 서로 다른 값을 가리키는 이유는 무엇인가요?

화살표 함수는 자기 this를 만들지 않고, 만들어진 시점의 바깥 함수나 메서드가 가진 this를 어휘적으로 캡처합니다. 일반 함수는 같은 위치에서 만들어졌더라도 호출된 객체를 기준으로 this를 정합니다.

this를 정하는 두 규칙

const box = {
  value: 10,
  makePair() {
    return {
      normal: function () { return this.value; },
      arrow: () => this.value
    };
  }
};
const pair = box.makePair();
pair.value = 20;
console.log(pair.normal(), pair.arrow()); // 20 10

makePair()는 메서드 호출이므로 그 안의 this는 box입니다. normal은 pair.normal()이라는 호출로 실행되어 pair를 보고 20을 반환합니다. arrow는 호출할 때 점 앞의 객체를 새 this로 받지 않고, 생성 당시의 box를 계속 보므로 10을 반환합니다. 이 특성은 타이머나 배열 콜백에서 바깥 객체를 사용해야 할 때 유용합니다.

콜백·메서드·수명

반대로 화살표 함수를 객체의 메서드로 작성하면 호출 객체의 this를 얻지 못할 수 있습니다. 화살표에는 자체 arguments, super, new.target도 없고 new의 생성자로 사용할 수도 없습니다. call, apply, bind로 화살표의 this를 바꿀 수 있다는 기대도 틀립니다. 객체 메서드처럼 호출 대상에 따라 달라져야 하면 일반 메서드를, 바깥 문맥을 고정해야 하면 화살표를 선택하겠습니다.

선택 기준과 검증

화살표가 고정하는 것은 this 바인딩이지 객체의 프로퍼티 값을 복사한 것이 아닙니다. 같은 객체의 value가 나중에 바뀌면 화살표는 새 값을 읽지만 다른 객체로 this를 바꾸지는 못합니다. 타이머나 이벤트 큐가 화살표를 오래 보유하면 바깥 객체도 살아 있을 수 있으므로 리스너 해제와 abort를 함께 설계하겠습니다.

화살표를 bind하면 this는 바뀌지 않아도 앞쪽 인자를 고정한 새 함수를 얻을 수 있습니다. 따라서 'bind가 전혀 효과 없다'가 아니라 this 바인딩에 영향을 주지 않는다고 정확히 말해야 합니다. 화살표의 바깥 this도 makePair를 어떻게 호출했는지에 달려 있으므로 메서드를 분리 호출한 상태에서 화살표를 만들었다면 원래 box를 자동으로 찾아 주지 않습니다.

클래스 필드에 화살표 함수를 두면 인스턴스마다 함수 객체가 생겨 콜백 전달은 편하지만, prototype 메서드처럼 모든 인스턴스가 하나를 공유하지는 않습니다. 많은 객체를 생성하는 경로에서 메모리 비용을 비교하고, 상속·테스트 대역이 prototype 메서드를 교체하는 방식에 의존하는지도 확인하겠습니다. arguments가 필요하면 바깥 함수의 것을 우연히 읽기보다 rest parameter로 명시해 콜백의 입력 계약을 드러내겠습니다.