Arrow function khác hàm thường như thế nào?

Question

Accepted Answer

Arrow function ngắn gọn hơn, nhưng khác biệt thực sự nằm ở **hành vi binding**, không chỉ cú pháp.

```js
const regular = function () {};
const arrow = () => {};
const short = x => x * 2; // implicit return cho một biểu thức
```

## Những khác biệt chính

**1. Không có `this` riêng** — arrow kế thừa `this` từ scope bao quanh. Đây là khác biệt quan trọng nhất và là lý do chúng tuyệt vời cho callback:

```js
const timer = {
  seconds: 0,
  start() {
    setInterval(() => this.seconds++, 1000); // ✅ `this` là timer
    // một hàm thường ở đây sẽ có `this` riêng (undefined) → lỗi
  },
};
```

**2. Không có object `arguments`** — dùng rest parameter thay thế:

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

**3. Không thể dùng làm constructor** — `new arrow()` ném lỗi, và chúng không có `prototype`.

## Khi nào KHÔNG dùng arrow

```js
const obj = {
  name: "Ann",
  greet: () => `Hi ${this.name}`, // ❌ `this` KHÔNG phải obj (mà là scope bên ngoài)
  greet2() { return `Hi ${this.name}`; }, // ✅ method cần `this` động
};
```

Đừng dùng arrow cho **method của object** (chúng sẽ không bind vào object) hoặc khi bạn cần `this`/`arguments` động (event handler dựa vào `this` là phần tử đó).

## Tại sao điều này quan trọng

Dùng arrow cho callback và các hàm ngắn nơi việc kế thừa `this` là điều bạn muốn; dùng hàm thường cho method, constructor, và prototype method.