Perbedaan Arrow Function dan Regular Function di JavaScript

Lebih dari Sekadar Tanda Panah

Sebelum tahun 2015, JavaScript hanya memiliki satu cara untuk membuat fungsi: menggunakan kata kunci function (Regular Function). Setelah *update* ES6, muncul gaya baru bernama Arrow Function () => {} yang langsung dicintai banyak *developer* karena bentuknya yang ringkas. Namun, awas, keduanya tidak 100% sama!

1. Perbedaan Sintaks (Penulisan Kode)

Arrow function sangat berguna untuk membuat kodemu jauh lebih pendek, terutama saat digunakan sebagai fungsi sisipan (Callback) di dalam map() atau filter().

Regular Function Tradisional:

function tambah(a, b) {
  return a + b;
}

Arrow Function Modern:

// Lebih ringkas. Bahkan kata 'return' dan kurung kurawal bisa dihilangkan!
const tambah = (a, b) => a + b;

2. Perbedaan Perilaku Konsep 'this' (Sangat Penting)

Ini adalah jebakan terbesar bagi programmer yang baru belajar JavaScript (*Object-Oriented*). Kata kunci this adalah cara sebuah fungsi menunjuk pada "dirinya sendiri" atau pemiliknya.

• Di Regular Function (Dynamic Binding): Nilai this akan berubah-ubah tergantung Siapa yang memanggil fungsi tersebut. Jika kamu menaruhnya di dalam tombol HTML, this akan menunjuk ke tombol tersebut.
• Di Arrow Function (Lexical Binding): Arrow Function itu "bisu" dan tidak memiliki nilai this miliknya sendiri! Ia akan selalu meminjam nilai 'this' dari induk luarnya tempat ia ditulis.

Contoh Kasus Error Pemula:

const user = {
  nama: "Budi",
  // Pakai Regular Function (Bagus!)
  sapaNormal: function() {
    console.log("Halo, saya " + this.nama); // Output: Halo, saya Budi
  },
  // Pakai Arrow Function (Bencana!)
  sapaPanah: () => {
    console.log("Halo, saya " + this.nama); // Output: Halo, saya undefined
  }
};

Pada kode di atas, sapaPanah menghasilkan *undefined* karena Arrow Function tidak bisa membaca dirinya sendiri (objek user), melainkan melompat keluar mencari *Window Global Object*.

Kesimpulan: Kapan Pakai yang Mana?

• Gunakan Arrow Function untuk fungsi matematis sederhana, *Callback* di dalam array method (seperti .map dan .filter), serta di seluruh React Functional Component-mu.
• Gunakan Regular Function khusus jika kamu sedang membuat Method di dalam sebuah Object (OOP) yang membutuhkan akses ke this.