← Kembali ke kursus
Pelajaran kursus · JavaScript
Pelajaran 11

Callback dan higher-order function

Fungsi sebagai argumen — fondasi array method dan event handler.

Pahami konsepnya

Di JavaScript, fungsi adalah warga kelas satu: bisa disimpan ke variabel, dimasukkan ke array, dikirim sebagai argumen, dan dikembalikan dari fungsi lain. Fungsi yang MENERIMA fungsi lain sebagai argumen disebut higher-order function; fungsi yang DIKIRIM disebut callback.

Contoh paling dikenali: array method. buah.sort(cmp) menerima fungsi pembanding; button.addEventListener("click", handler) menerima fungsi yang dijalankan saat klik. setTimeout(fn, 1000) menerima callback yang berjalan setelah satu detik.

Menulis callback sendiri: cukup terima parameter bernama fungsi lalu panggil di dalam: function proses(data, sukses, gagal). Callback menerima segalanya — data, error, bahkan callback lain (callback hell saat bersarang terlalu dalam, yang dipecahkan Promise).

Coba contoh kode

// higher-order + callback
function proses(data, format, tampilkan) {
  const hasil = format(data);
  tampilkan(hasil);
}

proses(
  [3, 1, 4, 1, 5],
  (d) => [...d].sort((a, b) => a - b),
  (h) => console.log("Hasil:", h)
);

// callback di sort dengan custom comparator
const siswa = [{ nama: "Budi", poin: 92 }, { nama: "Ari", poin: 85 }];
siswa.sort((a, b) => b.poin - a.poin);
console.log(siswa[0].nama);  // Budi

proses menerima dua callback: format mengubah data, tampilkan mencetak. Sort comparator (a, b) => b.poin - a.poin mengurutkan menurun berdasarkan poin.

Latihan singkat

Uji: saring([1..10], x => x % 3 === 0) — harus `[3,6,9]`.