Belajar JavaScript - Array Methods: map, filter, reduce, find

#Pendahuluan

Episode 8 menanamkan bahwa fungsi adalah nilai. Episode 9 memanen hasilnya: empat array method yang mengubah cara kalian memproses data — map, filter, reduce, dan find. Daripada menulis loop manual dengan for, kalian cukup mendeklarasikan apa yang ingin dilakukan pada data, dan method ini yang mengurus detail perulangannya.

Konsep yang paling penting: method ini tidak mengubah array asli — mereka mengembalikan array baru. Ini membuat kode lebih aman dan hasilnya bisa dirantai: hasil filter bisa langsung diumpankan ke map, dan seterusnya.

Gaya pemrograman ini disebut fungsional, dan akan terlihat familiar di semua framework JavaScript modern. Episode 9 adalah salah satu keterampilan yang paling sering diuji di interview teknis — kuasai dengan benar.

#map: Transformasi Setiap Elemen

map membuat array baru dengan hasil transformasi setiap elemen. Panjang array hasil selalu sama dengan array asal:

map mengubah setiap elemen

const harga = [10000, 25000, 40000];
const pajak = 0.11;
 
const hargaFinal = harga.map((h) => h + h * pajak);
 
console.log(hargaFinal);
console.log(harga);

harga.map((h) => h + h * pajak) menghasilkan [11100, 27750, 44400] tanpa mengubah harga asli. Contoh yang lebih dekat ke dunia nyata: memetakan array objek menjadi array properti tertentu, misalnya daftar nama dari daftar pengguna.

map pada array objek

const pengguna = [
  { nama: "Arman", role: "Backend" },
  { nama: "Sari", role: "Frontend" },
];
 
const namaSaja = pengguna.map((p) => p.nama);
console.log(namaSaja);

pengguna.map((p) => p.nama) mengekstrak properti nama dari setiap objek menjadi array ["Arman", "Sari"]. Ini pola plucking yang dipakai di mana-mana untuk menyiapkan data tampilan.

#filter dan find: Menyaring dan Mencari

#filter Mengembalikan Semua yang Cocok

filter membuat array baru berisi elemen yang memenuhi kondisi, dengan panjang yang mungkin lebih pendek:

filter menyaring elemen

const nilai = [45, 80, 92, 58, 73];
 
const lulus = nilai.filter((n) => n >= 75);
const gagal = nilai.filter((n) => n < 75);
 
console.log(lulus);
console.log(gagal);

nilai.filter((n) => n >= 75) mengembalikan [80, 92], dan kondisi kebalikannya mengembalikan [45, 58, 73]. filter selalu mengembalikan array — bahkan jika hasilnya kosong, hasilnya array kosong, bukan undefined.

#find Mengembalikan Satu Elemen Pertama

find mengembalikan satu elemen pertama yang memenuhi kondisi, atau undefined jika tidak ada:

find mencari satu elemen

const produk = [
  { nama: "Kopi", stok: 3 },
  { nama: "Teh", stok: 0 },
  { nama: "Susu", stok: 8 },
];
 
const habis = produk.find((p) => p.stok === 0);
console.log(habis);
 
const produkIdeal = produk.find((p) => p.stok > 5);
console.log(produkIdeal);

produk.find((p) => p.stok === 0) mengembalikan objek Teh — elemen pertama yang cocok. Sedangkan find((p) => p.stok > 5) mengembalikan Susu. Pilih filter ketika mungkin ada banyak hasil; pilih find ketika kalian hanya butuh satu.

#reduce: Menggabungkan Menjadi Satu Nilai

#Menghitung Total

reduce adalah method paling fleksibel sekaligus paling sering disalahpahami. Dia menggabungkan seluruh elemen menjadi satu nilai dengan akumulator:

reduce menjumlahkan elemen

const angka = [10, 20, 30];
 
const total = angka.reduce((akumulator, nilai) => akumulator + nilai, 0);
 
console.log(total);

angka.reduce((akumulator, nilai) => akumulator + nilai, 0) dimulai dengan akumulator = 0, lalu menjumlahkan setiap nilai satu per satu: 10, lalu 30, lalu 60. Argumen kedua 0 adalah nilai awal akumulator. Hasil akhirnya 60.

#reduce dengan Objek

reduce juga cocok untuk mengagregasi array objek, misalnya menjumlahkan properti tertentu:

reduce pada array objek

const pesanan = [
  { nama: "Kopi", harga: 15000, jumlah: 2 },
  { nama: "Teh", harga: 8000, jumlah: 3 },
];
 
const totalBayar = pesanan.reduce(
  (total, item) => total + item.harga * item.jumlah,
  0
);
 
console.log(totalBayar);

pesanan.reduce(...) menjumlahkan harga * jumlah setiap item: 15000 * 2 plus 8000 * 3, menghasilkan 54000. reduce menggantikan seluruh kelas loop manual yang menumpuk nilai — dan hasilnya lebih mudah dibaca.

#some, every, dan Merantai Method

#Menguji Kondisi dengan some dan every

some mengembalikan true jika setidaknya satu elemen memenuhi kondisi; every mengembalikan true hanya jika semua elemen memenuhinya:

some dan every

const skor = [70, 85, 90];
 
console.log(skor.some((s) => s > 80));
console.log(skor.every((s) => s > 80));

skor.some((s) => s > 80) menghasilkan true karena ada skor di atas 80, sedangkan every menghasilkan false karena tidak semua skor di atas 80. some dan every adalah cara ringkas menggantikan loop dengan variabel flag.

#Merantai Method

Karena setiap method mengembalikan array baru, hasilnya bisa dirantai langsung:

Merantai filter dan map

const transaksi = [
  { item: "Kopi", jumlah: 2, harga: 15000 },
  { item: "Teh", jumlah: 1, harga: 8000 },
  { item: "Kue", jumlah: 3, harga: 20000 },
];
 
const totalBesar = transaksi
  .filter((t) => t.jumlah > 1)
  .map((t) => t.jumlah * t.harga)
  .reduce((a, b) => a + b, 0);
 
console.log(totalBesar);

Rantai di atas memilih transaksi dengan jumlah lebih dari 1, menghitung subtotal setiap transaksi, lalu menjumlahkan semuanya. transaksi.filter(...).map(...).reduce(...) menghasilkan 90000. Setiap langkah membaca dari atas ke bawah — ini gaya yang sangat ekspresif dan mudah di-debug.

#Penutup

Episode 9 membekali kalian empat array method inti: map untuk transformasi satu-ke-satu, filter untuk penyaringan, find untuk mencari satu elemen, dan reduce untuk agregasi. Kalian juga belajar some, every, dan merantai method menjadi pipeline fungsional.

Inti yang harus dibawa pulang:

• map mengubah setiap elemen dan mengembalikan array baru berukuran sama.
• filter mengembalikan semua elemen yang memenuhi kondisi.
• find mengembalikan satu elemen pertama yang cocok, atau undefined.
• reduce menggabungkan seluruh elemen menjadi satu nilai lewat akumulator.
• some dan every menguji kondisi terhadap elemen array.
• Method yang mengembalikan array bisa dirantai tanpa mengubah array asli.

Di episode 10 selanjutnya kita akan membahas modul ES dan penggunaan import/export — memecah kode menjadi file-file kecil yang saling berbagi kode dengan import dan export, membedakan named dan default export, serta menjalankan modul di Node.js. Inilah cara project JavaScript tumbuh tanpa menjadi bola raksasa yang kusut.