Memahami Arrow Function di JavaScript.

Arrow function (ES6) menawarkan sintaks yang lebih ringkas dibanding function expression biasa, sekaligus mengubah cara this diperlakukan di dalamnya.

Variasi Sintaks Arrow Function

// Satu parameter, tanpa kurung wajib
const kuadrat = n => n * n;

// Banyak parameter, kurung wajib
const tambah = (a, b) => a + b;

// Tanpa parameter
const sapa = () => "Halo!";

// Isi lebih dari satu baris, butuh kurung kurawal dan return eksplisit
const proses = (data) => {
  const hasil = data.map(n => n * 2);
  return hasil;
};

Mengembalikan Objek Literal

Karena kurung kurawal dianggap sebagai badan fungsi, mengembalikan objek literal langsung butuh tanda kurung tambahan.

const buatPengguna = (nama, umur) => ({ nama, umur });

console.log(buatPengguna("Eka", 24)); // { nama: "Eka", umur: 24 }

Arrow Function Tidak Punya this Sendiri

Perbedaan paling penting: arrow function tidak memiliki this miliknya sendiri, melainkan mewarisi this dari scope tempat ia ditulis.

class Tombol {
  constructor(label) {
    this.label = label;
  }

  pasangEvent(elemen) {
    elemen.addEventListener("click", () => {
      console.log(`${this.label} diklik`); // this tetap merujuk ke instance Tombol
    });
  }
}

Jika function biasa dipakai sebagai pengganti arrow function di atas, this di dalamnya justru akan merujuk ke elemen HTML yang diklik, bukan ke instance Tombol.

Kapan Sebaiknya Tidak Memakai Arrow Function

Karena tidak punya this sendiri, arrow function kurang cocok dipakai sebagai method langsung di dalam objek literal yang mengandalkan this.

const penghitung = {
  jumlah: 0,
  tambah: () => {
    this.jumlah++; // this DI SINI bukan merujuk ke 'penghitung'
  },
};

Arrow function juga tidak memiliki objek arguments sendiri dan tidak bisa dipakai sebagai constructor lewat new.

const Kendaraan = (merek) => {
  this.merek = merek;
};

new Kendaraan("Toyota"); // TypeError: Kendaraan is not a constructor

Kesimpulan

Arrow function unggul untuk fungsi pendek, callback, dan situasi yang membutuhkan this tetap merujuk ke konteks luar, seperti di dalam class atau closure. Namun untuk method objek yang bergantung pada this dinamis atau fungsi yang perlu dipakai sebagai constructor, function declaration biasa tetaplah pilihan yang lebih tepat.