Belajar JavaScript - Arrow Function dan Higher-Order Function

#Pendahuluan

Episode 8 membawa kalian ke jantung JavaScript modern: arrow function dan higher-order function. Arrow function memperkenalkan cara menulis fungsi yang jauh lebih ringkas, sekaligus mengubah cara this diperlakukan — dan perbedaan itulah yang paling sering membingungkan. Higher-order function membuka konsep bahwa fungsi bisa diperlakukan seperti nilai apa pun: dikirim ke fungsi lain dan dikembalikan dari fungsi lain.

Kedua konsep ini bukan sekadar gaya menulis. Higher-order function adalah fondasi dari array methods yang akan kita bahas di episode 9, pola callback di episode 14 dan 16, dan hampir semua library modern. Memahami keduanya sekarang akan membuat seluruh sisa series ini terasa jauh lebih mudah.

Konsep kunci yang harus dipegang sejak awal: di JavaScript, fungsi adalah nilai. Begitu kalian menerimanya, sisanya mengalir dengan natural.

#Sintaks Arrow Function

#Bentuk Dasar dan Implicit Return

Arrow function ditulis dengan =>. Ketika hanya mengembalikan satu ekspresi, return dan kurung kurawal bisa dihilangkan — ini disebut implicit return:

Arrow function dasar

const kaliDua = (angka) => angka * 2;
const sapa = (nama) => `Halo, ${nama}!`;
 
console.log(kaliDua(21));
console.log(sapa("Arman"));

const kaliDua = (angka) => angka * 2 adalah versi ringkas dari function (angka) { return angka * 2; }. Satu parameter boleh tanpa tanda kurung: angka => angka * 2. Untuk fungsi dengan satu ekspresi, ini gaya yang dominan di semua codebase JavaScript modern.

#Bentuk Lengkap dengan Blok

Ketika fungsi berisi lebih dari satu pernyataan, gunakan blok dan return eksplisit:

Arrow function dengan blok

const proses = (nilai) => {
  const kuadrat = nilai * nilai;
  console.log(`Kuadrat dari ${nilai} adalah ${kuadrat}`);
  return kuadrat;
};
 
console.log(proses(9));

const proses = (nilai) => memakai kurung kurawal sehingga kalian bebas menulis banyak pernyataan. Aturan praktis: tanpa kurung kurawal berarti implicit return; dengan kurung kurawal, return wajib ditulis eksplisit jika ingin mengembalikan nilai.

#Arrow Function dan Konteks this

#this Melekat Secara Lexical

Perbedaan paling fundamental arrow function dengan function biasa ada di kata kunci this. Function biasa mendapatkan this dari cara fungsi dipanggil, sedangkan arrow function mewarisi this dari tempat fungsi ditulis — inilah yang disebut lexical this:

Arrow function mewarisi this

const pengguna = {
  nama: "Arman",
  perkenalan: function () {
    setTimeout(() => {
      console.log(`Halo, saya ${this.nama}`);
    }, 100);
  },
};
 
pengguna.perkenalan();

Di dalam setTimeout, function biasa akan kehilangan this yang menunjuk ke pengguna. Arrow function () => justru mewarisi this dari fungsi luar, sehingga this.nama tetap membaca "Arman". Ini alasan utama arrow function dipakai di dalam callback.

#Kapan Jangan Memakai Arrow Function

Arrow function bukan pengganti total. Jangan memakai arrow function sebagai method objek ketika this harus menunjuk ke objek itu sendiri:

Kapan arrow function salah

const mobil = {
  merek: "Toyota",
  suara: () => {
    console.log(`Bunyi dari ${this.merek}`);
  },
};
 
mobil.suara();

Karena this arrow function melekat secara lexical, this.merek di dalam suara menunjuk ke scope global, bukan ke mobil — hasilnya Bunyi dari undefined. Untuk method yang butuh this objek, gunakan function biasa. Rincian lengkap this akan kita bedah di episode 12.

#Higher-Order Function

#Fungsi sebagai Nilai

Higher-order function adalah fungsi yang menerima fungsi lain sebagai argumen, mengembalikan fungsi, atau keduanya. Ini bekerja karena di JavaScript fungsi adalah nilai biasa yang bisa disimpan di variabel:

Fungsi sebagai argumen

function terapkan(fungsi, nilai) {
  return fungsi(nilai);
}
 
const gandakan = (angka) => angka * 2;
const negatif = (angka) => -angka;
 
console.log(terapkan(gandakan, 10));
console.log(terapkan(negatif, 10));

terapkan(gandakan, 10) mengirim fungsi gandakan sebagai argumen dan menjalankannya di dalam. Hasilnya 20 dan -10. Dengan memisahkan "apa yang dilakukan" (fungsi) dari "bagaimana menjalankannya" (higher-order function), kode menjadi jauh lebih fleksibel.

#Fungsi yang Mengembalikan Fungsi

Higher-order function juga bisa menghasilkan fungsi baru:

Fungsi yang mengembalikan fungsi

function buatPengali(pengali) {
  return (angka) => angka * pengali;
}
 
const kaliTiga = buatPengali(3);
const kaliLima = buatPengali(5);
 
console.log(kaliTiga(7));
console.log(kaliLima(7));

buatPengali(3) mengembalikan fungsi baru yang mengalikan argumennya dengan 3, lalu kaliTiga(7) menghasilkan 21. Pola function factory seperti ini sangat umum: menghasilkan fungsi yang sudah terkunci pada konfigurasi tertentu.

#Callback dalam Praktik

#Contoh Realistis

Callback adalah fungsi yang dikirim ke fungsi lain untuk dijalankan nanti. Kombinasi arrow function dan callback menghasilkan kode yang ringkas dan ekspresif:

Callback dengan arrow function

function prosesDaftar(daftar, transformasi) {
  const hasil = [];
  for (const item of daftar) {
    hasil.push(transformasi(item));
  }
  return hasil;
}
 
const harga = [10000, 25000, 40000];
const denganPajak = prosesDaftar(harga, (h) => h * 1.11);
 
console.log(denganPajak);

prosesDaftar(harga, (h) => h * 1.11) mengirim arrow function sebagai callback yang menambahkan pajak 11 persen ke setiap harga. Hasilnya [11100, 27750, 44400]. Perhatikan bahwa callback yang ditulis inline membuat alur transformasi terbaca langsung di tempat pemanggilan.

#Callback di Dunia Nyata

Callback bukan konsep teoritis. Event di browser, setTimeout, dan fetch semuanya memakai callback. Contoh paling sederhana:

Callback dengan setTimeout

setTimeout(() => {
  console.log("Dijalankan setelah 1 detik");
}, 1000);
 
console.log("Dijalankan lebih dulu");

Output menunjukkan Dijalankan lebih dulu muncul lebih awal karena setTimeout menjadwalkan callback untuk nanti, bukan menjalankannya langsung. Ini contoh pertama kalian melihat kode asynchronous — topik yang akan kita bedah penuh di episode 15 dan 16.

#Penutup

Episode 8 memperkenalkan arrow function dengan syntax ringkas dan this yang melekat secara lexical, serta higher-order function yang memperlakukan fungsi sebagai nilai. Kalian juga memakai callback inline — yang terasa asing di awal, tapi akan terasa natural setelah episode 9.

Inti yang harus dibawa pulang:

• Arrow function tanpa kurung kurawal mengembalikan ekspresi secara implicit.
• Arrow function mewarisi this dari scope tempatnya ditulis (lexical).
• Jangan pakai arrow function sebagai method objek yang butuh this.
• Higher-order function menerima atau mengembalikan fungsi.
• Callback adalah fungsi yang dikirim untuk dijalankan nanti.
• setTimeout dan event memakai callback yang dieksekusi asynchronously.

Di episode 9 selanjutnya kita akan membahas array methods map, filter, reduce, dan find — transformasi dan penyaringan data dengan gaya fungsional yang mengubah cara kalian memproses array. Ini adalah salah satu keterampilan yang paling sering dipakai di dunia kerja JavaScript.