Bayangin kontraktor yang nge-handle bangunan rumah. Dia gak ngerjain semua sendiri — dia kasih sub-pekerjaan ke tukang spesialis: tukang batu untuk tembok, tukang kayu untuk pintu, tukang listrik untuk kabel. Kontraktor cuma kasih instruksi spesifik ke tiap tukang. Higher Order Function (HOF) itu konsep yang sama di JavaScript — function yang nerima function lain sebagai "tukang spesialis". array.map(fn) = "kontraktor map, kerjain tiap item pake function fn yang kamu kasih ini". HOF adalah jantung dari functional programming dan modern JavaScript.

🤔 Tahukah kamu? Method yang udah kamu pake terus (map, filter, reduce, forEach) — itu semua HOF. Setiap kali kamu kasih arrow function ke array.filter(...), kamu lagi praktekin functional programming pattern yang berusia 60 tahun (lahir di bahasa Lisp tahun 1958).

// Fungsi sebagai argumen (callback)
function terapkan(arr, fn) {
  return arr.map(fn);
}

terapkan([1, 2, 3], n => n * 2); // [2, 4, 6]

Array methods yang kamu sudah kenal (map, filter, reduce) adalah contoh HOF:

const angka = [1, 2, 3, 4, 5, 6];

// Kombinasi filter + reduce
const totalGenap = angka
  .filter(n => n % 2 === 0)    // [2, 4, 6]
  .reduce((acc, n) => acc + n, 0); // 12

Fungsi yang mengembalikan fungsi:

function pengali(faktor) {
  return (angka) => angka * faktor;
}

const kaliDua = pengali(2);
const kaliTiga = pengali(3);

kaliDua(5);  // 10
kaliTiga(5); // 15

🎭 Analogi sehari-hari

Tukang yang minta bantuan tukang lain.

Kontraktor (map) datang ke setiap tukang dengan instruksi: "kerjakan barang ini pakai cara fn yang saya kasih". map-nya generic — yang menentukan hasilnya adalah fungsi fn yang kamu kirim.

[1,2,3].map(n => n * 2);   // tukang dikasih instruksi "kali dua"
[1,2,3].map(n => n + 100); // tukang yang sama, instruksi "tambah 100"

⚠️ Jebakan yang sering ditemui

1. Kirim fungsi vs PANGGIL fungsi.

[1,2,3].map(double);     // ✅ kirim referensi fungsi
[1,2,3].map(double());   // ❌ panggil dulu, hasilnya undefined dikirim

2. map callback dapat 3 argumen (item, index, array) — kadang nyangkut.

["1","2","3"].map(parseInt);  // [1, NaN, NaN]
// karena parseInt(item, index) → parseInt("2", 1) = NaN
["1","2","3"].map(s => parseInt(s, 10));  // ✅ [1, 2, 3]

3. Lupa return di callback multi-line.

[1,2,3].map(n => { n * 2; });        // [undefined, undefined, undefined]
[1,2,3].map(n => { return n * 2; }); // [2, 4, 6]

🎯 map vs filter vs reduce vs forEach — pilih yang mana?

• Transform tiap item, tetap N item → map ([1,2,3] → [2,4,6])
• Saring item, dapat ≤N item → filter ([1,2,3,4] → [2,4])
• Gabung jadi satu nilai (sum, max, group, object) → reduce ([1,2,3] → 6)
• Iterasi side-effect doang (logging, DOM update, no return) → forEach
• Cari satu item → find (return item) atau findIndex (return position)
• Cek minimal satu match → some (boolean)
• Cek SEMUA match → every (boolean)

Anti-pattern: pakai forEach buat transform + push ke array baru. Itu kerjaan map — lebih clean, immutable, chainable. forEach = side-effect only.

TL;DR: Higher Order Function (HOF) = function yang terima/return function lain. Array methods (map, filter, reduce) semua HOF — jantung functional programming JavaScript. Pattern ini bikin kode declarative ("apa yang aku mau") bukan imperative ("gimana cara dapetnya"). Modern React/Vue/Svelte heavy pakai HOF.