`this`의 값은 어떻게 결정되나요?

Question

Accepted Answer

`this`는 함수가 정의된 위치가 아니라 **어떻게 호출되는지**에 따라 결정됩니다. 다섯 가지 규칙이 있습니다:

```js
const obj = {
  x: 1,
  getX() { return this.x; },
};

obj.getX();          // 1   → 메서드 호출: `this`는 `obj`
const f = obj.getX;
f();                  // undefined (또는 window) → 일반 호출: `this`는 전역/undefined
f.call(obj);          // 1   → call/apply/bind를 통한 명시적 바인딩
new SomeClass();      //     → `this`는 새로 만들어진 인스턴스
```

## 화살표 함수 예외 (가장 중요한 것)

화살표 함수는 **자신만의 `this`가 없습니다** — 정의 시점에 둘러싼 스코프에서 `this`를 상속받습니다. 그래서 화살표 함수가 콜백에 적합합니다:

```js
const obj = {
  items: [1, 2],
  logAll() {
    // ✅ 화살표가 logAll에서 `this`를 상속 → `this`는 obj
    this.items.forEach(i => console.log(this.items, i));

// ❌ 여기서 일반 함수는 자신만의 `this`(undefined)를 가짐 → 충돌
    // this.items.forEach(function (i) { console.log(this.items); });
  },
};
```

## 흔한 함정

메서드를 콜백으로 전달하면 그 바인딩이 **사라집니다**. 그 후 일반적으로 호출되기 때문입니다:

```js
button.addEventListener("click", obj.getX);        // ❌ `this`는 버튼
button.addEventListener("click", () => obj.getX()); // ✅ obj를 유지
button.addEventListener("click", obj.getX.bind(obj)); // ✅ 이것도 괜찮음
```

## 왜 중요한가

`this`를 잘못 이해하는 것은 가장 흔한 JS 버그 중 하나입니다.

해결책은 보통 의도한 `this`를 고정하기 위한 화살표 함수나 `.bind()`입니다.