Arrow function adalah cara yang lebih pendek buat nulis function. Kerjanya tetap sama: function menerima nilai lewat parameter, mengolahnya, lalu mengirim hasilnya keluar dengan return. Yang berubah cuma cara nulisnya, plus satu beda soal this di bagian akhir.
🧪 Tebakan cepat:
const kali = (a, b) => { a * b };lalukali(2, 3). Hasilnya6atauundefined? Tebak dulu, jawabannya ada di bagian "Kurung kurawal butuh return".
Dari function biasa ke arrow function
Ini function biasa yang menjumlahkan dua angka:
function add(a, b) {
return a + b;
}
console.log(add(3, 5)); // 8
Ini function yang sama, ditulis sebagai arrow function:
const add = (a, b) => {
return a + b;
};
console.log(add(3, 5)); // 8
const add =menyimpan function-nya di sebuah variabel. Nama variabel itulah nama function-nya, jadi tetap dipanggiladd(3, 5).(a, b)adalah parameter, sama kayak di function biasa.=>adalah tanda panahnya: tanda sama dengan=lalu lebih besar>, tanpa spasi di tengah. Dia menggantikan katafunction.{ return a + b; }adalah badan function.returnmengirim hasilnya keluar.
Dua-duanya mencetak 8.
Versi satu baris
Kalau badannya cuma satu ekspresi (satu hitungan yang menghasilkan nilai), kurung kurawal dan return boleh dibuang:
const add = (a, b) => a + b;
const kaliTiga = n => n * 3;
const sapa = () => "Halo!";
console.log(add(3, 5)); // 8
console.log(kaliTiga(5)); // 15
console.log(sapa()); // Halo!
Nilai sesudah => langsung dikembalikan. Ini namanya implicit return (return otomatis). Soal kurung di parameter:
- Satu parameter: kurungnya boleh ditulis, boleh gak.
n => n * 3sama dengan(n) => n * 3. - Tanpa parameter: tulis kurung kosong,
() => "Halo!". - Dua parameter atau lebih: kurungnya harus ada.
(x, y) => x + ybenar,x, y => x + yerror.
Kurung kurawal butuh return
const kaliA = (n) => { n * 2 };
const kaliB = (n) => { return n * 2 };
console.log(kaliA(4)); // undefined
console.log(kaliB(4)); // 8
Begitu ada { }, JavaScript menganggapnya badan function biasa, dan gak ada nilai yang keluar sampai kamu menulis return. Hasilnya undefined, artinya "gak ada nilai", tanpa pesan error. Jadi pilih salah satu: tanpa kurawal dan tanpa return, atau pakai kurawal plus return. Jawaban tebakan tadi: undefined.
Satu beda penting: this
this adalah kata kunci yang, di dalam function biasa yang dipanggil lewat object, menunjuk ke object itu:
const kucing = {
nama: "Oyen",
sapa: function () {
return "Halo " + this.nama;
},
};
console.log(kucing.sapa()); // Halo Oyen
Arrow function gak punya this sendiri. Dia memakai this dari kode di sekelilingnya. Kalau sapa ditulis sebagai arrow function, this bukan lagi kucing, jadi nama Oyen gak kebaca. Makanya method object ditulis pakai function biasa, sedangkan arrow function cocok buat function kecil yang dikirim ke function lain. Soal kecepatan, keduanya sama, gak ada yang lebih cepat.
⚠️ Jebakan yang sering ketemu
returndi versi satu baris.n => return n * 2bikin SyntaxError, kodenya gak jalan sama sekali. Tanpa kurawal,returngak ditulis.- Memanggil sebelum ditulis. Function biasa bisa dipanggil dari baris di atasnya, arrow function di
constgak bisa.kaliTiga(5)sebelum barisconst kaliTiga = ...bikin ReferenceError. Tulis dulu, baru panggil. - Nama beda satu huruf.
kaliduadankaliDuaitu dua nama yang beda, karena JavaScript membedakan huruf besar dan kecil.
TL;DR: Arrow function ditulis const nama = (parameter) => { return hasil; };. Kalau badannya cuma satu ekspresi, buang kurawal dan return: const kaliTiga = n => n * 3;. Pakai kurawal tanpa return hasilnya undefined. Dua parameter atau lebih butuh kurung (x, y), tanpa parameter tulis (). Arrow function gak punya this sendiri, jadi method object tetap pakai function biasa.
