7 Metode Array JavaScript untuk Mengolah Data Sehari-hari

Kamu baru saja menarik data pesanan dari server: ratusan baris berisi nama pembeli, jumlah belanja, dan status pengiriman. Tugasmu mengubah data itu jadi ringkasan yang bisa dibaca tim. Di sini kamu butuh metode array JavaScript untuk mengolah data tanpa menulis loop panjang berulang kali. Tujuh metode di bawah ini menutup sebagian besar pekerjaan semacam itu.

map: mengubah setiap item jadi bentuk lain

map menjalankan fungsi pada tiap elemen dan menghasilkan array baru dengan panjang yang sama. Pakai saat kamu ingin mengubah bentuk data tanpa membuang satu pun item.

const harga = [12000, 45000, 30000];
const denganPajak = harga.map(nilai => nilai * 1.11);
// [13320, 49950, 33300]

Array asli tidak tersentuh. Ini penting saat data sumber masih dipakai bagian lain di halaman.

filter: menyisakan item yang memenuhi syarat

Kalau kamu hanya butuh sebagian data, filter mengembalikan array baru berisi elemen yang lolos pengujian. Hasilnya selalu array, meski tidak ada yang cocok, sehingga aman dirantai dengan metode lain.

const pesanan = [
  { nama: "Rina", total: 75000, lunas: true },
  { nama: "Budi", total: 42000, lunas: false },
  { nama: "Sari", total: 128000, lunas: true }
];

const belumLunas = pesanan.filter(p => !p.lunas);

Beda dengan find, filter, dan findIndex, filter mengambil semua kecocokan, bukan berhenti di yang pertama.

reduce: merangkum banyak nilai jadi satu

reduce menyusuri array sambil membawa akumulator. Gunakan untuk menjumlah, menghitung frekuensi, atau menyusun objek dari daftar.

const totalBelanja = pesanan.reduce((jumlah, p) => jumlah + p.total, 0);
// 245000

Selalu isi nilai awal (0 di atas). Tanpa itu, array kosong akan melempar error dan hasilnya bisa membingungkan.

find: mengambil satu item pertama yang cocok

Ketika kamu yakin hanya butuh satu hasil, find lebih tepat daripada filter. Ia berhenti mencari begitu menemukan kecocokan dan mengembalikan undefined bila tidak ada.

const cari = pesanan.find(p => p.nama === "Budi");
if (!cari) {
  console.log("Pesanan tidak ditemukan");
}

Pemeriksaan undefined wajib dilakukan sebelum mengakses properti hasilnya.

some dan every: mengecek kondisi seluruh array

Keduanya mengembalikan boolean. some cukup satu elemen memenuhi syarat untuk menghasilkan true, sedangkan every menuntut semua elemen lolos.

• some cocok untuk pertanyaan seperti “apakah ada pesanan yang belum lunas?”
• every cocok untuk validasi, misalnya memastikan semua total di atas nol.

const adaTunggakan = pesanan.some(p => !p.lunas); // true
const semuaValid = pesanan.every(p => p.total > 0); // true

sort: mengurutkan tanpa merusak data asli

sort mengubah array di tempat, jadi salin dulu bila data asli masih dipakai. Selain itu, tanpa fungsi pembanding, angka diurutkan sebagai teks sehingga 100 bisa muncul sebelum 25.

const urut = [...pesanan].sort((a, b) => b.total - a.total);

Spread di depan memastikan array pesanan tetap utuh. Pola yang sama berlaku saat kamu menggabungkan array dengan cara lain di panduan menggabungkan array.

flatMap: meratakan hasil sekaligus

flatMap menjalankan map lalu meratakan satu tingkat. Ini berguna saat setiap item menghasilkan array kecil, misalnya daftar tag per pesanan.

const tag = pesanan.flatMap(p => p.kategori || []);

Hasilnya satu array datar, bukan array berisi array. Kalau kedalaman data lebih dari satu tingkat, gunakan flat dengan argumen kedalaman.

Merangkai metode jadi satu alur

Metode ini paling berguna saat dirangkai. Contoh berikut menyaring pesanan lunas, mengubahnya jadi nama, lalu mengurutkan sesuai abjad:

const namaLunas = pesanan
  .filter(p => p.lunas)
  .map(p => p.nama)
  .sort();

Setiap langkah punya satu tugas. Kalau rantainya terasa terlalu panjang, pecah jadi variabel antara agar mudah dilacak saat debugging. Kamu juga bisa menambahkan pengecekan tipe data sederhana dengan typeof sebelum mengolah data dari sumber luar.

Ringkasan

map mengubah, filter menyaring, reduce merangkum, find mengambil satu, some dan every mengecek kondisi, sort mengurutkan, dan flatMap meratakan hasil. Ketujuh metode ini membuat pengolahan data di JavaScript jauh lebih ringkas dibanding loop manual.

Pertanyaan yang Sering Diajukan

Apakah map dan filter mengubah array asli?

Tidak. Keduanya membuat array baru. Metode yang mengubah array asli antara lain sort, push, splice, dan reverse.

Kapan sebaiknya memakai reduce dibanding loop biasa?

Pakai reduce saat hasil akhirnya berupa satu nilai, seperti total atau objek ringkasan. Untuk proses yang punya banyak efek samping, loop biasa lebih mudah dibaca.

Apakah semua metode ini bisa dirantai?

Hanya yang mengembalikan array, seperti map, filter, sort, dan flatMap. find, some, every, dan reduce mengembalikan nilai tunggal sehingga tidak bisa dilanjutkan dengan metode array lain.