Cara Menggunakan Array Method (map, filter, reduce) di JavaScript

Dalam pengembangan aplikasi, kita hampir selalu bekerja dengan data berupa array — daftar produk, daftar pengguna, daftar transaksi, dan sebagainya. JavaScript menyediakan tiga method array yang sangat powerful untuk mengolah data: map, filter, dan reduce. Menguasai ketiganya akan membuat kode kamu jauh lebih bersih dan efisien dibanding menggunakan loop for manual.

Array.map() — Transformasi Data

map() digunakan untuk membuat array baru dengan mentransformasi setiap elemen dari array asal. Array asal tidak berubah.

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

// Kalikan setiap angka dengan 2
const hasilKali = angka.map(n => n * 2);
console.log(hasilKali); // [2, 4, 6, 8, 10]
console.log(angka);     // [1, 2, 3, 4, 5] — tidak berubah!

// Contoh nyata: Ambil hanya nama dari array objek
const pengguna = [
  { id: 1, nama: 'Andi', umur: 25 },
  { id: 2, nama: 'Budi', umur: 30 },
  { id: 3, nama: 'Citra', umur: 22 }
];

const daftarNama = pengguna.map(p => p.nama);
console.log(daftarNama); // ['Andi', 'Budi', 'Citra']

// Transformasi kompleks — tambah properti baru
const penggunaPlus = pengguna.map(p => ({
  ...p,
  status: p.umur >= 25 ? 'Senior' : 'Junior'
}));
console.log(penggunaPlus[0]); // { id: 1, nama: 'Andi', umur: 25, status: 'Senior' }

Array.filter() — Menyaring Data

filter() membuat array baru yang hanya berisi elemen-elemen yang memenuhi kondisi tertentu (kondisi harus mengembalikan true atau false):

const produk = [
  { nama: 'Laptop', harga: 8000000, stok: 5 },
  { nama: 'Mouse', harga: 150000, stok: 0 },
  { nama: 'Keyboard', harga: 500000, stok: 3 },
  { nama: 'Monitor', harga: 3000000, stok: 0 },
  { nama: 'Webcam', harga: 400000, stok: 7 }
];

// Filter produk yang masih ada stoknya
const produkTersedia = produk.filter(p => p.stok > 0);
console.log(produkTersedia.length); // 3

// Filter produk dengan harga di bawah 1 juta
const produkMurah = produk.filter(p => p.harga < 1000000);
console.log(produkMurah.map(p => p.nama)); // ['Mouse', 'Keyboard', 'Webcam']

// Gabungan dua kondisi — tersedia DAN murah
const produkMurahTersedia = produk.filter(p => p.stok > 0 && p.harga < 1000000);
console.log(produkMurahTersedia.map(p => p.nama)); // ['Keyboard', 'Webcam']

Array.reduce() — Mengakumulasi Nilai

reduce() adalah method paling fleksibel. Ia mengolah semua elemen array dan menghasilkan satu nilai tunggal (bisa angka, string, objek, atau bahkan array baru).

const angka2 = [10, 20, 30, 40, 50];

// Menjumlahkan semua angka
const total = angka2.reduce((akumulator, nilaiSaatIni) => {
  return akumulator + nilaiSaatIni;
}, 0); // 0 adalah nilai awal akumulator

console.log(total); // 150

// Mencari nilai maksimum
const maks = angka2.reduce((max, n) => n > max ? n : max, angka2[0]);
console.log(maks); // 50

// Hitung total harga belanja
const keranjang = [
  { nama: 'Kopi', harga: 25000, qty: 2 },
  { nama: 'Roti', harga: 15000, qty: 3 },
  { nama: 'Susu', harga: 18000, qty: 1 }
];

const totalHarga = keranjang.reduce((total, item) => {
  return total + (item.harga * item.qty);
}, 0);

console.log('Total belanja: Rp', totalHarga.toLocaleString('id-ID')); // Rp 118.000

Menghitung Frekuensi dengan reduce()

Ini salah satu contoh lanjutan yang sangat berguna — menghitung berapa kali tiap nilai muncul:

const buah = ['apel', 'mangga', 'apel', 'pisang', 'mangga', 'apel'];

const hitungBuah = buah.reduce((akumulasi, buahSaatIni) => {
  akumulasi[buahSaatIni] = (akumulasi[buahSaatIni] || 0) + 1;
  return akumulasi;
}, {});

console.log(hitungBuah); // { apel: 3, mangga: 2, pisang: 1 }

Menggabungkan map, filter, dan reduce (Method Chaining)

Kekuatan sejati ketiga method ini terlihat ketika digabungkan dalam satu alur:

const transaksi = [
  { id: 1, tipe: 'masuk', jumlah: 500000 },
  { id: 2, tipe: 'keluar', jumlah: 120000 },
  { id: 3, tipe: 'masuk', jumlah: 750000 },
  { id: 4, tipe: 'keluar', jumlah: 85000 },
  { id: 5, tipe: 'masuk', jumlah: 300000 }
];

// 1. filter() — ambil hanya transaksi masuk
// 2. map() — ambil hanya nilainya
// 3. reduce() — jumlahkan semua
const totalPemasukan = transaksi
  .filter(t => t.tipe === 'masuk')
  .map(t => t.jumlah)
  .reduce((total, jumlah) => total + jumlah, 0);

console.log('Total Pemasukan: Rp', totalPemasukan.toLocaleString('id-ID'));
// Total Pemasukan: Rp 1.550.000

Kesimpulan

Method map(), filter(), dan reduce() adalah tiga pilar pengolahan data array di JavaScript modern. Gunakan map() untuk mentransformasi data, filter() untuk menyaring data berdasarkan kondisi, dan reduce() untuk mengakumulasi data menjadi satu nilai. Kombinasi ketiganya memungkinkan kamu mengolah data yang kompleks dengan kode yang ringkas dan mudah dibaca. Hindari loop for manual ketika ketiga method ini sudah mencukupi kebutuhanmu.