🎨

Frontend Fundamentals

Kursus Gratis — Fullstack Talent

14

Pabrik Pengolahan Data: Array Methods

📖 20 menit baca 🏷️ Data Manipulation (Wajib React)

Di dunia nyata (terutama di Backend Node.js atau Frontend React), 90% waktu kita akan dihabiskan untuk mengurus segunung data bertipe Array of Objects (Daftar Pengguna, List Produk Toko, Riwayat Transaksi).

Looping kuno seperti for (let i=0) terlalu panjang dan membosankan. JavaScript modern membekali kita dengan 4 mesin pengolahan tingkat tinggi: filter, reduce, some, dan every. Mereka bagaikan alat sortir otomatis di pabrik kardus logistik!

📦 Data Master (Bahan Baku Kita)

const daftarMember = [ { nama: "Andi", umur: 25, status: "Aktif", saldo: 500000 }, { nama: "Budi", umur: 17, status: "Pasif", saldo: 150000 }, { nama: "Cici", umur: 30, status: "Aktif", saldo: 900000 }, { nama: "Dodi", umur: 21, status: "Aktif", saldo: 50000 }, ];

🕵️‍♀️ 1. Saringan Ketat: .filter()

Fungsinya sangat jelas: Menyaring/mengeliminasi Array lama, dan menghasilkan KERANJANG ARRAY BARU yang hanya berisi item-item yang lolos kriteria (menghasilkan nilai true). Array asli TIDAK akan rusak/berubah.

// Misi: Cari semua member yang umurnya di atas 20 Tahun DAN berstatus Aktif const memberDewasaOl = daftarMember.filter((orang) => { return orang.umur > 20 && orang.status === "Aktif"; }); console.log(memberDewasaOl); // Hasil: [ // { nama: "Andi", umur: 25, status: "Aktif", saldo: 500000 }, // { nama: "Cici", umur: 30, status: "Aktif", saldo: 900000 }, // { nama: "Dodi", umur: 21, status: "Aktif", saldo: 50000 } // ] --- Budi TERBUANG karena madih di bawah umur & Pasif! ---

🌪️ 2. Mesin Pelebur: .reduce()

Ini adalah metode Dewa yang paling kompleks. reduce bekerja dengan cara melebur/memeras isi sebuah Array yang panjang menjadi SATU NILAI TUNGGAL (bisa berupa satu Angka total, atau satu Object gabungan). Paling sering dipakai untuk menghitung Total Harga Keranjang Belanja.

// Misi: Hitung Total Uang Saldo gabungan milik SEMUA Member! // Catatan: 'totalSementara' adalah Koper penyimpanan berjalannya (Accumulator) // Catatan: 'orang' adalah item saat ini yang sedang ditinjau. const totalKekayaan = daftarMember.reduce((totalSementara, orang) => { return totalSementara + orang.saldo; // Tambahkan saldo org ini ke dalam koper berjalan }, 0); // <--- Angka 0 Merupakan SALDO AWAL sebelum mesin dinyalakan! console.log(totalKekayaan); // Hasil: 1600000 (500rb + 150rb + 900rb + 50rb)

⚠️ Lupa Nilai Awal?

Jika kamu LUPA meletakkan angka 0 di akhir kurung kurawal, JavaScript akan mengambil elemen Data Pertama (Si Andi wujud Object Utuh) sebagai Total Awal, dan mesinmu akan meledak merangsek karena mencoba menambah Object + Angka hasilnya akan menjadi string aneh [object Object]150000900000.

🔦 3. Detektor Cepat: .some() & .every()

Kedua metode ini mirip intelijen pencari fakta. Mereka TIDAK me-return urutan Data, melainkan hanya menjawab pertanyaan dengan Tuntas: TRUE atau FALSE (Ya atau Tidak). Sangat berguna untuk Validasi.

.some()

"Apa ADA SATU SAJA yang...?"

Ia mengecek keseluruhan Array. Jika ia berhasil menemukan MINIMAL 1 SAJA data yang lolos kriteria, ia akan langsung gembira mengembalikan true dan berhenti mencari!

// Misi: Adakah di grup ini yang masih Bocil? const adaBocil = daftarMember.some((orang) => { return orang.umur < 18; }); console.log(adaBocil); // TRUE (Karena ada si Budi, umur 17)

.every()

"Apakah SUDAH SEMUANYA...?"

Ia adalah Polisi Ketat. Mengembalikan nilai true HANYA JIKA 100% SEMUA DATA lolos kriteria. Jika ada 1 saja yang meleset, ia akan marah dan me-return false.

// Misi: Apakah seluruh member ini berstatus AKTIF? const semuaAktif = daftarMember.every((orang) => { return orang.status === "Aktif"; }); console.log(semuaAktif); // FALSE! (Gagal karena Budi masih Pasif)

🎯 Studi Kasus: Dashhboard Laporan Keuangan

Klien meminta kamu membuat Summary Keuangan. Menggunakan data mentah daftarMember di atas, ubahlahnya menjadi Laporan Bisnis Akurat dengan sekali Render!

// 1. Berapa Jumlah Orang yg Saldo-nya di atas 100 Ribu? (FILTER) const anggotaKaya = daftarMember.filter(m => m.saldo > 100000); const totalAsetKaya = anggotaKaya.length; // Ada 3 orang // 2. Berapa TOTAL UANG yang ada di tangan "Anggota Kaya" ini? (REDUCE) const totalRupiah = anggotaKaya.reduce((total, m) => { return total + m.saldo; }, 0); // (500rb + 150rb + 900rb) = Rp 1.550.000 // 3. Apakah Aplikasi ini Aman? (Ga ada orang berumur di bwh 15 thn?) const keamananAplikasi = daftarMember.some(m => m.umur < 15); const statusAman = !keamananAplikasi ? "Sangat Aman ✅" : "Bahaya Bocil ⛔";
Output UI (Render Frame)
👥 Total Klien Prioritas: 3 Orang
💰 Valuasi Aset Klien: Rp 1.550.000
🛡️ Keamanan Usia: Sangat Aman ✅

*Kita berhasil menyarikan 4 baris data Array menjadi Dashboard Executive ringkas, murni tanpa bantuan Looping tradisional (for-loop).