화살표 함수(arrow function)는 일반 함수와 어떻게 다른가요?

Question

Accepted Answer

화살표 함수는 더 짧지만, 진짜 차이는 단순한 문법이 아니라 **바인딩 동작**에 있습니다.

```js
const regular = function () {};
const arrow = () => {};
const short = x => x * 2; // 단일 표현식에 대한 암시적 반환
```

## 핵심 차이점

**1. 자신만의 `this`가 없음** — 화살표는 둘러싼 스코프에서 `this`를 상속합니다. 가장 중요한 차이이며, 콜백에 훌륭한 이유입니다:

```js
const timer = {
  seconds: 0,
  start() {
    setInterval(() => this.seconds++, 1000); // ✅ `this`는 timer
    // 여기서 일반 함수는 자신만의 `this`(undefined)를 가짐 → 버그
  },
};
```

**2. `arguments` 객체가 없음** — 대신 레스트 매개변수를 사용하세요:

```js
const sum = (...args) => args.reduce((a, b) => a + b, 0);
```

**3. 생성자로 사용할 수 없음** — `new arrow()`는 throw하며, `prototype`이 없습니다.

## 화살표를 사용하면 안 되는 경우

```js
const obj = {
  name: "Ann",
  greet: () => `Hi ${this.name}`, // ❌ `this`는 obj가 아님 (바깥 스코프)
  greet2() { return `Hi ${this.name}`; }, // ✅ 메서드는 동적 `this`가 필요
};
```

**객체 메서드**에는 화살표를 사용하지 마세요(객체에 바인딩되지 않음). 또한 동적 `this`/`arguments`가 필요한 경우(요소가 `this`가 되기를 기대하는 이벤트 핸들러)에도 사용하지 마세요.

## 왜 중요한가

`this`를 상속받는 것이 원하는 동작인 콜백과 짧은 함수에는 화살표를 사용하고, 메서드, 생성자, 프로토타입 메서드에는 일반 함수를 사용하세요.