thisarrow-function

this binding 규칙을 설명해 주세요

예상 시간
7분
30초 답변

꼬리질문

조금 더 깊게 물어본다면

답변 뒤에 이어질 수 있는 질문들을 하나씩 열어볼 수 있어요.

arrow function의 this는 언제 결정되나요?

부가 설명

const user = {
  name: "Joon",
  sayName() {
    console.log(this.name);
  },
};
 
user.sayName(); // "Joon"
 
const sayName = user.sayName;
sayName(); // strict mode라면 this는 undefined

같은 함수라도 user.sayName()처럼 호출하면 this가 user이고, 따로 꺼내서 sayName()으로 호출하면 객체와의 연결이 사라집니다.

const counter = {
  count: 0,
  increase: () => {
    this.count += 1;
  },
};

이 경우 arrow function은 counter를 this로 갖지 않습니다. 객체 method가 필요하면 일반 method 문법을 쓰는 편이 안전합니다.

this는 암기보다 “호출부를 본다”는 기준을 잡는 것이 중요합니다. 함수가 어디에 들어 있느냐보다, 호출할 때 왼쪽에 어떤 객체가 붙어 있는지 보는 식입니다.

React 함수 컴포넌트에서는 this를 거의 직접 쓰지 않지만, class component나 일반 JavaScript utility, event handler를 이해할 때 여전히 자주 나옵니다.

한 줄 정리

일반 함수의 this는 호출 방식이 정하고, arrow function의 this는 선언된 위치의 lexical scope가 정합니다.