Memahami map, filter, dan reduce di JavaScript dengan Mudah

Selamat Tinggal For-Loop Kuno

Saat kamu belajar React, Vue, atau sekadar mengambil data dari API, kamu akan selalu berhadapan dengan data bertipe Array (kumpulan data). Dulu, kita menggunakan for (let i = 0; i < data.length; i++) untuk mengolahnya. Sekarang, cara itu sudah dianggap usang.

JavaScript modern memiliki tiga metode sakti (Higher-Order Functions) yang membuat kodemu jauh lebih pendek, bersih, dan elegan.

1. Map (Mengubah / Menerjemahkan)

Gunakan map() ketika kamu ingin mengubah setiap isi array menjadi bentuk baru, tanpa mengubah jumlah datanya.

• Analogi: Kamu punya sekeranjang apel hijau. Kamu memasukkan semuanya ke mesin cat, dan mesin mengeluarkan jumlah apel yang sama tapi semuanya kini berwarna merah.
• Contoh Penggunaan: Kamu mendapat data nama user (huruf kecil semua), lalu kamu ingin mengubah semuanya menjadi huruf kapital.

const nama = ["budi", "siti", "andi"];
const namaKapital = nama.map(n => n.toUpperCase());
// Hasil: ["BUDI", "SITI", "ANDI"]

2. Filter (Menyaring Data)

Sesuai namanya, filter() digunakan ketika kamu ingin membuang data yang tidak memenuhi syarat. Jumlah array hasil akhirnya pasti lebih sedikit (atau sama) dari array aslinya.

• Analogi: Kamu punya sekeranjang buah campur (apel, jeruk, mangga). Kamu menggunakan saringan yang hanya meloloskan apel.
• Contoh Penggunaan: Mengambil produk yang harganya di bawah 50 ribu, atau mencari user yang statusnya 'Aktif'.

const angka = [10, 25, 40, 5, 50];
const angkaBesar = angka.filter(num => num > 20);
// Hasil: [25, 40, 50]

3. Reduce (Meringkas Menjadi Satu Nilai)

Ini adalah metode yang paling ditakuti pemula, padahal fungsinya sangat kuat. reduce() digunakan untuk melebur seluruh isi array menjadi SATU nilai tunggal.

• Analogi: Kamu memasukkan apel, jeruk, dan mangga ke dalam mesin blender. Hasil akhirnya adalah SATU gelas jus campur.
• Contoh Penggunaan: Menghitung total harga belanjaan di keranjang *e-commerce*.

const harga = [10000, 20000, 15000];
const totalHarga = harga.reduce((total, saatIni) => total + saatIni, 0);
// Hasil: 45000

Kesimpulan

Ketiga metode ini tidak akan merusak (mutasi) data array aslimu, melainkan mengembalikan array baru. Mulai sekarang, biasakan diri untuk menggunakan map, filter, dan reduce. Ini adalah syarat mutlak jika kamu ingin menguasai ekosistem React.js!