Menguasai Array Functions JavaScript: map, filter, reduce dengan Studi Kasus Nyata

map, filter, dan reduce adalah tiga fungsi array JavaScript yang paling sering dipakai sehari-hari, tapi juga paling sering ditulis dengan cara yang membingungkan buat orang lain (atau diri sendiri tiga bulan kemudian). Artikel ini membahas ketiganya dari dasar sampai studi kasus nyata yang biasa Anda temui di project sungguhan: keranjang belanja, dashboard admin, dan laporan data.

Kenapa Bukan Pakai for Loop Saja?

for loop tidak salah, tapi tiga fungsi ini punya keunggulan yang membuat kode lebih mudah dibaca:

• Deklaratif — Anda menyatakan apa yang ingin dicapai, bukan bagaimana caranya langkah demi langkah.
• Tidak mengubah array asli (kecuali Anda sengaja melakukannya) — mengurangi bug akibat side effect tak terduga.
• Bisa dirangkai (chaining) — beberapa transformasi data bisa ditulis berurutan dalam satu alur yang mudah diikuti.

1. map() — Mengubah Setiap Item Jadi Bentuk Baru

map() dipakai ketika Anda ingin mentransformasi setiap item dalam array menjadi bentuk lain, dengan jumlah item yang tetap sama persis.

const products = [
  { name: 'Kaos Polos', price: 75000 },
  { name: 'Celana Jeans', price: 250000 },
  { name: 'Topi', price: 50000 },
];

// Ambil nama produknya saja
const names = products.map(product => product.name);
console.log(names);
// ['Kaos Polos', 'Celana Jeans', 'Topi']

// Tambahkan pajak 11% ke setiap harga
const withTax = products.map(product => ({
  ...product,
  priceWithTax: Math.round(product.price * 1.11),
}));
console.log(withTax[0]);
// { name: 'Kaos Polos', price: 75000, priceWithTax: 83250 }

Kesalahan umum: memakai map() hanya untuk menjalankan efek samping (misalnya console.log) tanpa mengembalikan nilai baru. Kalau Anda tidak butuh array hasilnya, pakai forEach() saja — lebih jujur soal maksud kodenya.

2. filter() — Menyaring Item Berdasarkan Kondisi

filter() mengembalikan array baru yang cuma berisi item yang lolos suatu kondisi. Jumlah item hasilnya bisa lebih sedikit (atau sama) dari array asli, tidak pernah lebih banyak.

const orders = [
  { id: 1, status: 'completed', total: 150000 },
  { id: 2, status: 'pending', total: 89000 },
  { id: 3, status: 'completed', total: 320000 },
  { id: 4, status: 'cancelled', total: 45000 },
];

// Ambil pesanan yang sudah selesai saja
const completed = orders.filter(order => order.status === 'completed');
console.log(completed.length); // 2

// Bisa dikombinasikan dengan kondisi lebih dari satu
const bigCompletedOrders = orders.filter(
  order => order.status === 'completed' && order.total > 200000
);
console.log(bigCompletedOrders); // [{ id: 3, status: 'completed', total: 320000 }]

3. reduce() — Meringkas Array Jadi Satu Nilai

Ini fungsi yang paling sering bikin bingung karena paling fleksibel — bisa menghasilkan angka, string, object, bahkan array baru. Konsepnya: reduce() "mengumpulkan" nilai dari setiap item ke dalam satu accumulator yang terus dibawa dari iterasi ke iterasi.

const cart = [
  { name: 'Kaos Polos', price: 75000, qty: 2 },
  { name: 'Celana Jeans', price: 250000, qty: 1 },
  { name: 'Topi', price: 50000, qty: 3 },
];

// Hitung total belanja
const total = cart.reduce((accumulator, item) => {
  return accumulator + (item.price * item.qty);
}, 0); // 0 adalah nilai awal accumulator

console.log(total); // 550000

reduce() juga bisa dipakai untuk mengelompokkan data — kasus yang sangat umum di dashboard admin:

const transactions = [
  { category: 'Makanan', amount: 50000 },
  { category: 'Transport', amount: 20000 },
  { category: 'Makanan', amount: 35000 },
  { category: 'Hiburan', amount: 100000 },
];

// Kelompokkan total pengeluaran per kategori
const totalPerCategory = transactions.reduce((acc, trx) => {
  acc[trx.category] = (acc[trx.category] || 0) + trx.amount;
  return acc;
}, {});

console.log(totalPerCategory);
// { Makanan: 85000, Transport: 20000, Hiburan: 100000 }

Studi Kasus: Menggabungkan Ketiganya di Keranjang Belanja

Kasus nyata yang hampir pasti Anda temui: hitung total harga hanya dari produk yang tersedia (stok > 0), setelah diskon diterapkan.

const cart = [
  { name: 'Kaos Polos', price: 75000, qty: 2, stock: 10, discount: 0.1 },
  { name: 'Celana Jeans', price: 250000, qty: 1, stock: 0, discount: 0 },
  { name: 'Topi', price: 50000, qty: 3, stock: 5, discount: 0 },
];

const totalBelanja = cart
  .filter(item => item.stock > 0)              // 1. buang item yang habis stok
  .map(item => ({                              // 2. hitung harga setelah diskon
    ...item,
    finalPrice: item.price * (1 - item.discount) * item.qty,
  }))
  .reduce((sum, item) => sum + item.finalPrice, 0); // 3. jumlahkan semuanya

console.log(totalBelanja); // 285000

Perhatikan betapa mudahnya alur ini dibaca: "saring yang ada stoknya, hitung harga finalnya, lalu jumlahkan" — persis seperti kalimat yang Anda pakai untuk menjelaskan logikanya ke rekan tim.

Kapan Sebaiknya Tetap Pakai for Loop?

• Saat Anda perlu break atau continue di tengah iterasi — array functions tidak mendukung ini secara native.
• Saat performa jadi prioritas utama di array yang sangat besar (jutaan item) — for loop biasa umumnya sedikit lebih cepat karena tidak ada overhead pemanggilan fungsi di tiap iterasi.
• Saat logikanya melibatkan banyak kondisi bercabang yang justru jadi lebih sulit dibaca kalau dipaksakan ke bentuk deklaratif.

Ringkasan Cepat

Fungsi	Dipakai untuk	Hasil
map()	Mengubah bentuk tiap item	Array baru, jumlah sama
filter()	Menyaring item	Array baru, jumlah ≤ asli
reduce()	Meringkas jadi satu nilai	Bebas: angka, object, array, dll.

Kesimpulan

Sekali terbiasa memakai ketiganya, Anda akan jarang kembali menulis for loop manual untuk transformasi data sederhana. Mulai dari mengganti satu for loop di proyek Anda saat ini dengan kombinasi map/filter/reduce — rasakan sendiri bedanya saat kode itu dibaca ulang oleh Anda (atau rekan tim) beberapa minggu kemudian.