Arrow function

Arrow function adalah penulisan fungsi dengan tanda panah => yang diperkenalkan pada ES2015 sebagai alternatif yang lebih ringkas dari ekspresi fungsi. Mekanismenya tetap sama, fungsi menerima parameter, menjalankan tubuhnya, dan mengembalikan nilai, tetapi bentuk tulisannya memangkas kata function, tanda kurung, bahkan kata return pada kondisi tertentu. Topik ini menata varian sintaksnya dari yang paling panjang ke yang paling ringkas, menunjukkan titik di mana hasilnya justru membingungkan, lalu menutup dengan panduan memilih antara arrow dan fungsi biasa. Semua contoh berupa berkas JavaScript utuh yang dapat dijalankan dengan Node.js.

Dari function ke bentuk panah#

Ekspresi const jumlahkan = function (a, b) { return a + b } dan const jumlahkanRingkas = (a, b) => a + b mendefinisikan dua fungsi yang bekerja persis sama, menerima dua argumen dan mengembalikan jumlahnya. Perbedaannya murni pada tulisan, arrow membuang kata function, dan bila tubuhnya satu ekspresi tanpa kurung kurawal, hasil ekspresi itu otomatis menjadi nilai balik tanpa kata return. Pengembalian otomatis seperti ini disebut implicit return, yaitu nilai balik yang dihasilkan secara diam-diam dari satu ekspresi. Sisanya hanya soal tanda kurung, dan aturannya bisa dirangkum menjadi beberapa varian.

Berkas berikut memuat satu fungsi pembanding dan empat varian arrow yang semuanya menghitung hal yang sama atau setara.

// Sintaks arrow function dari bentuk paling panjang ke paling ringkas.

const jumlahkan = function (a, b) {
  return a + b;
};

const jumlahkanArrow = (a, b) => {
  return a + b;
};

const jumlahkanRingkas = (a, b) => a + b;

const kuadrat = angka => angka * angka;

const sapaDunia = () => "Halo, dunia!";

console.log(jumlahkan(10, 4));
console.log(jumlahkanArrow(10, 4));
console.log(jumlahkanRingkas(10, 4));
console.log(kuadrat(12));
console.log(sapaDunia());

14
14
14
144
Halo, dunia!

Tiga baris pertama mencetak 14 karena ketiga bentuknya menghitung 10 + 4 dengan cara yang sama, hanya tulisannya yang berbeda. Tabel berikut merangkum varian-varian tersebut beserta aturan tanda kurungnya.

Implicit return dan batasnya#

Implicit return hanya berlaku bila tubuh arrow berupa satu ekspresi tanpa kurung kurawal. Begitu kurung kurawal dipasang, tubuhnya menjadi blok biasa dan nilai baliknya harus dinyatakan dengan return, kalau tidak, fungsi mengembalikan undefined. Ada satu jebakan yang muncul dari aturan ini, yaitu arrow yang seharusnya mengembalikan object literal. Tanda kurung kurawal setelah => selalu dibaca sebagai awal blok, sehingga object yang dimaksud justru dibaca sebagai isi blok dan nilai baliknya hilang.

Berkas berikut menampilkan kedua versi, satu tanpa pembungkus dan satu dengan pembungkus tanda kurung.

// Implicit return dengan object literal butuh tanda kurung pembungkus.

const versiSalah = nilai => { kategori: nilai };
console.log("tanpa kurung :", versiSalah(3));

const versiBenar = nilai => ({ kategori: nilai });
console.log("dengan kurung:", versiBenar(3));

tanpa kurung : undefined
dengan kurung: { kategori: 3 }

Pada versiSalah, { kategori: nilai } dibaca sebagai blok yang isinya pernyataan berlabel, bukan object, sehingga fungsinya mengembalikan undefined. Tanda kurung pada versiBenar memaksa isinya dibaca sebagai satu ekspresi, dan itulah yang menjadi nilai baliknya. Kelalaian serupa juga mudah muncul pada body blok yang lupa memuat return.

const total = (a, b) => {
  const hasil = a + b;
};

console.log(total(10, 4));

undefined

Variabel hasil benar-benar dihitung di dalam tubuh fungsi, tetapi tidak ada pernyataan return yang mengantarnya keluar, sehingga pemanggil menerima undefined. Kesalahan ini tidak memunculkan error apa pun, dan tanda bahayanya hanya muncul ketika nilai yang diharapkan dipakai lebih lanjut.

Kapan arrow lebih jelas#

Arrow paling menjelaskan dirinya pada callback pendek, yaitu fungsi kecil yang dioper untuk dijalankan oleh fungsi lain dan isinya satu transformasi sederhana. Tulisan harga => harga * 1000 terbaca sekilas dan tidak memerlukan nama, sedangkan fungsi yang sama ditulis dengan deklarasi justru menambah tiga baris untuk logika satu baris. Sebaliknya, deklarasi fungsi biasa lebih tepat untuk logika utama program, yaitu logika yang perlu diberi nama, menjalankan beberapa langkah, atau dipanggil dari banyak tempat. Metode object juga lebih nyaman ditulis dengan fungsi biasa karena alasan yang menyangkut this.

Berkas berikut menempatkan keduanya berdampingan, arrow untuk transformasi data dan fungsi biasa untuk pemformatan yang diberi nama.

// Arrow ringkas pada callback pendek, deklarasi fungsi pada logika utama.

const hargaRibu = [15, 22, 8];

const hargaRupiah = hargaRibu.map(harga => harga * 1000);
console.log(hargaRupiah);

function formatRupiah(angka) {
  return "Rp" + angka.toLocaleString("id-ID");
}

console.log(hargaRupiah.map(formatRupiah));

[ 15000, 22000, 8000 ]
[ 'Rp15.000', 'Rp22.000', 'Rp8.000' ]

Metode array seperti map menerima callback dan menerapkannya ke setiap elemen, dan pembahasannya lengkap pada modul Metode array dan gaya fungsional. Pada contoh di atas, arrow harga => harga * 1000 memasangkankan harga ribuan dengan rupiah penuh, sedangkan formatRupiah cukup diberi nama sekali karena berisi aturan pemformatan yang dipakai berulang. Bila aturan pemformatannya berubah, perbaikan hanya terjadi di satu tempat, dan itulah kelebihan fungsi bernama untuk logika yang dipakai dalam jangka panjang.

Ringkasan#

• Arrow function => adalah bentuk ringkas ekspresi fungsi, dengan tanda kurung yang boleh dilepas hanya bila parameternya tepat satu.
• Body berupa satu ekspresi tanpa kurung kurawal menghasilkan implicit return, sedangkan body blok wajib memuat return eksplisit agar tidak mengembalikan undefined.
• Object literal sebagai nilai balik implicit return harus dibungkus tanda kurung, kalau tidak, tanda kurung kurawalnya dibaca sebagai awal blok.
• Arrow paling jelas pada callback pendek, sedangkan deklarasi fungsi biasa lebih tepat untuk logika bernama, tubuh yang panjang, dan kode yang memakai this.

Referensi#

• Arrow functions — MDN Web Docs — rujukan lengkap varian sintaks dan perilaku arrow function.
• Arrow functions, the basics — The Modern JavaScript Tutorial — varian penulisan dan aturan implicit return beserta contohnya.
• Functions — MDN Web Docs — rujukan induk fungsi JavaScript, termasuk ekspresi fungsi sebagai pembanding.