Bagaimanakah fungsi anak panah berbeza daripada fungsi biasa?

Question

Accepted Answer

Fungsi anak panah lebih pendek, tetapi perbezaan sebenarnya adalah dalam **perilaku pengikatan**, bukan hanya sintaks.

```js
const regular = function () {};
const arrow = () => {};
const short = x => x * 2; // implicit return for one expression
```

## Perbezaan utama

**1. Tiada `this` sendiri** — anak panah mewarisi `this` daripada skop yang melingkupi. Ini adalah perbezaan paling penting dan mengapa ia sempurna untuk panggilan balik:

```js
const timer = {
  seconds: 0,
  start() {
    setInterval(() => this.seconds++, 1000); // ✅ `this` is timer
    // a regular function here would have its own `this` (undefined) → bug
  },
};
```

**2. Tiada objek `arguments`** — gunakan parameter rest sebaliknya:

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

**3. Tidak boleh digunakan sebagai pembina** — `new arrow()` membuang, dan mereka tidak mempunyai `prototype`.

## Bilakah JANGAN gunakan anak panah

```js
const obj = {
  name: "Ann",
  greet: () => `Hi ${this.name}`, // ❌ `this` is NOT obj (it's outer scope)
  greet2() { return `Hi ${this.name}`; }, // ✅ method needs dynamic `this`
};
```

Jangan gunakan anak panah untuk **kaedah objek** (mereka tidak akan mengikat kepada objek) atau apabila anda memerlukan `this`/`arguments` yang dinamik (pengendali acara yang bergantung pada `this` menjadi elemen).

## Mengapa ia penting

Gunakan anak panah untuk panggilan balik dan fungsi pendek di mana pewarisan `this` adalah apa yang anda inginkan; gunakan fungsi biasa untuk kaedah, pembina, dan kaedah prototaip.