Higher-Order Function JavaScript: map, filter, reduce, dan Callback

Fungsi Adalah Nilai

Di JavaScript, fungsi adalah nilai seperti nilai lainnya. Kamu bisa menyimpannya di variabel, memasukkannya ke array, memberikannya ke fungsi lain, atau mengembalikannya dari sebuah fungsi. Fakta itu saja sudah membuka satu gaya pemrograman tersendiri:

const square = (n) => n * n;
const operations = [square, (n) => n + 1];

console.log(square);          // the function itself
console.log(operations[0](5)); // call it out of the array

Begitu kamu terbiasa memperlakukan fungsi sebagai nilai, higher-order function tidak lagi terasa misterius. Higher-order function hanyalah fungsi yang menerima fungsi sebagai argumen, mengembalikan fungsi, atau keduanya. Itulah seluruh definisinya.

Menerima Fungsi sebagai Argumen

Bentuk yang paling umum: fungsi yang menerima callback dan menjalankannya untukmu. Kamu sudah memakainya tanpa memikirkannya.

[1, 2, 3].forEach((n) => console.log(n * 10));

setTimeout(() => console.log("later"), 100);

forEach adalah higher-order: ia menerima fungsimu dan memanggilnya sekali untuk setiap item. setTimeout adalah higher-order: ia menerima fungsimu dan memanggilnya setelah jeda. Kamu fokus pada apa yang dilakukan; mereka mengurus kapan dan berapa kali.

Menulis versimu sendiri terlihat sama. Berikut fungsi kecil yang menjalankan callback hanya kalau sebuah kondisi bernilai true:

function runIf(condition, action) {
    if (condition) action();
}

runIf(2 + 2 === 4, () => console.log("math still works"));
runIf(false, () => console.log("never runs"));

action adalah parameter yang kebetulan berisi fungsi. Memanggilnya dengan action() menjalankan apa pun yang diberikan.

Tiga yang Benar-Benar Akan Kamu Pakai: map, filter, reduce

Array dilengkapi method higher-order yang menggantikan sebagian besar loop for yang seharusnya kamu tulis. Kuasai ketiganya, dan banyak sekali kode sehari-hari jadi lebih pendek dan jelas.

map: mengubah setiap item

const prices = [10, 20, 30];
const withTax = prices.map((price) => price * 1.08);

console.log(withTax);

map memanggil fungsimu sekali untuk setiap item dan mengumpulkan nilai kembaliannya ke array baru. Panjangnya sama, isinya sudah diubah. Array aslinya tidak dimodifikasi.

filter: menyimpan yang cocok

const users = [
    { name: "Ada", active: true },
    { name: "Boris", active: false },
    { name: "Chen", active: true },
];

const active = users.filter((user) => user.active);
console.log(active);

filter menyimpan item yang membuat callback mengembalikan nilai truthy dan membuang sisanya. Nilai kembaliannya array baru, mungkin lebih pendek.

reduce: meringkas array menjadi satu nilai

const numbers = [1, 2, 3, 4];
const total = numbers.reduce((sum, n) => sum + n, 0);

console.log(total);

reduce adalah yang serbaguna. Callback menerima akumulator yang terus berjalan dan item saat ini; apa pun yang kamu kembalikan menjadi akumulator berikutnya. Argumen kedua (di sini 0) adalah nilai awalnya.

Kamu bisa merangkainya. Di sinilah gaya ini terbayar:

const orders = [
    { item: "book", price: 12, paid: true },
    { item: "pen", price: 3, paid: false },
    { item: "mug", price: 8, paid: true },
];

const revenue = orders
    .filter((o) => o.paid)
    .map((o) => o.price)
    .reduce((sum, p) => sum + p, 0);

console.log(revenue);

Baca dari atas ke bawah: simpan pesanan yang sudah dibayar, ambil harganya, lalu jumlahkan. Tanpa loop, tanpa counter yang berubah-ubah, tanpa error selisih satu yang perlu dikhawatirkan.

Mengembalikan Fungsi dari Fungsi

Separuh lainnya dari higher-order. Fungsi yang membangun lalu mengembalikan fungsi lain:

function multiplyBy(factor) {
    return (n) => n * factor;
}

const double = multiplyBy(2);
const triple = multiplyBy(3);

console.log(double(5));
console.log(triple(5));

multiplyBy(2) berjalan sekali dan menyerahkan fungsi yang benar-benar baru. Fungsi baru itu masih mengingat factor. Itulah closure, dan nanti ada halamannya sendiri. Untuk sekarang, pelajarannya: memanggil multiplyBy dengan argumen berbeda memberimu fungsi-fungsi khusus yang berbeda, dibangun dari templat yang sama.

Pola ini muncul di mana-mana:

function prefixer(prefix) {
    return (message) => `[${prefix}] ${message}`;
}

const warn = prefixer("WARN");
const info = prefixer("INFO");

console.log(warn("disk almost full"));
console.log(info("backup complete"));

Satu definisi, dua fungsi yang bisa dipakai ulang. Lebih baik daripada menulis warn dan info secara manual lalu menjaga keduanya tetap sinkron.

Fungsi Bernama vs Callback Inline

Kamu bisa memberikan arrow function langsung di tempat, atau memberikan fungsi lewat namanya. Keduanya berfungsi, pilih yang lebih enak dibaca:

const nums = [1, 2, 3, 4, 5];

// Inline: good when the logic is short and used once.
const doubled = nums.map((n) => n * 2);

// By name: good when the logic has a meaningful name or is reused.
const isEven = (n) => n % 2 === 0;
const evens = nums.filter(isEven);

console.log(doubled, evens);

Saat kamu memberikan isEven (tanpa kurung), kamu menyerahkan fungsinya sendiri. Menambahkan () akan langsung memanggilnya dan memberikan hasilnya, kesalahan umum para pemula:

nums.filter(isEven);     // correct: passes the function
nums.filter(isEven());   // wrong: calls isEven with no args, passes the result

Kalau callback-nya mulai melebar lebih dari beberapa baris, pisahkan dan beri nama. Kode di sekitarnya biasanya jadi lebih enak dibaca.

Contoh Lengkap

Higher-order function bersinar saat kamu menyusun potongan-potongan kecil. Misalkan kamu punya daftar produk dan ingin nama barang yang terjangkau dan tersedia, dalam huruf kapital:

const products = [
    { name: "notebook", price: 4, stock: 12 },
    { name: "laptop", price: 900, stock: 0 },
    { name: "pen", price: 1, stock: 50 },
    { name: "desk", price: 200, stock: 3 },
];

const affordable = (p) => p.price < 50;
const inStock = (p) => p.stock > 0;

const result = products
    .filter(affordable)
    .filter(inStock)
    .map((p) => p.name.toUpperCase());

console.log(result);

Setiap helper punya satu tugas. Setiap method array melakukan satu transformasi. Pipeline-nya terbaca seperti spesifikasi tentang apa yang kamu mau, bukan penjelasan tentang cara melakukan perulangan.

Kapan Tidak Memakainya

Method higher-order memang hebat, tetapi bukan pengganti loop untuk setiap situasi:

• Kalau kamu perlu berhenti di tengah jalan, for atau for...of dengan break lebih jelas daripada mencoba keluar dari forEach.
• Kalau kamu melakukan sesuatu yang async di dalam callback, map dan forEach tidak akan menunggunya. Pakai for...of dengan await, atau Promise.all dengan map.
• Kalau callback-nya mengubah state bersama, kamu mulai menjauh dari keunggulan gaya ini. Pakai loop biasa atau refactor agar mengembalikan nilai baru.

Kalau dipakai di tempat yang tepat, map, filter, dan reduce memangkas sebagian besar boilerplate loop dari kode sehari-hari. Kalau dipakai di mana-mana, keterbacaan justru menurun. Pilih alat yang membuat maksudmu paling jelas.

Berikutnya: Objek

Fungsi bukan satu-satunya nilai yang layak dijadikan fondasi. Objek adalah andalan JavaScript untuk mengelompokkan data dan perilaku yang saling berkaitan, dan objek jugalah yang mengisi sebagian besar array yang baru saja kamu filter dan map. Itu topik halaman berikutnya.