Array Method: map, filter, dan forEach

Cara modern mengolah array

Daripada for loop manual, JavaScript menyediakan method khusus yang lebih ekspresif. Tiga yang paling sering dipakai: map, filter, dan forEach.

map: transformasi tiap item

map membuat array baru dengan menerapkan fungsi ke setiap item. Array asli tidak berubah:

let harga = [10000, 20000, 30000];
let hargaDiskon = harga.map(h => h * 0.9);
console.log(hargaDiskon); // [9000, 18000, 27000]
console.log(harga);       // [10000, 20000, 30000], asli utuh

Analoginya seperti fotokopi yang dimodifikasi: dokumen asli tetap, kamu dapat versi baru yang sudah diubah.

filter: saring yang memenuhi syarat

filter membuat array baru berisi item yang lolos tes (callback mengembalikan true):

let nilai = [55, 80, 92, 60, 75];
let lulus = nilai.filter(n => n >= 75);
console.log(lulus); // [80, 92, 75]

Kombinasi keduanya sangat powerful:

let siswa = [
  { nama: "Rizky", nilai: 85 },
  { nama: "Sinta", nilai: 60 },
  { nama: "Budi", nilai: 90 }
];
let namaLulus = siswa
  .filter(s => s.nilai >= 75)
  .map(s => s.nama);
console.log(namaLulus); // ["Rizky", "Budi"]

forEach: lakukan sesuatu untuk tiap item

forEach menjalankan fungsi untuk tiap item tapi tidak mengembalikan array baru. Cocok untuk efek samping seperti mencetak atau update DOM:

let buah = ["apel", "mangga"];
buah.forEach((b, i) => {
  console.log(i + ": " + b);
});

Catatan teknis: Jangan pakai forEach untuk membangun array baru, itu tugas map. Kesalahan umum: const hasil = arr.forEach(...) lalu heran kenapa hasil undefined. forEach selalu mengembalikan undefined, sedangkan map mengembalikan array baru.

Chaining tiga tahap

Kekuatan sebenarnya terlihat saat dirangkai untuk soal kompleks. Contoh: dari data siswa, ambil nama yang lulus dengan nilai di atas 80, dalam huruf kapital:

let siswa = [
  { nama: "rizky", nilai: 85 },
  { nama: "sinta", nilai: 70 },
  { nama: "budi", nilai: 92 }
];

let hasil = siswa
  .filter(s => s.nilai > 80)
  .map(s => s.nama.toUpperCase())
  .sort();

console.log(hasil); // ["BUDI", "RIZKY"]

Baca dari atas ke bawah seperti kalimat: saring yang nilainya di atas 80, petakan ke nama kapital, urutkan. Tiap tahap menghasilkan array baru untuk tahap berikutnya. Kode seperti ini hampir tidak butuh komentar karena sudah menjelaskan dirinya sendiri.

Kesimpulan

Urutannya: butuh array baru hasil transformasi pakai map, butuh subset pakai filter, cuma mau eksekusi sesuatu pakai forEach. Tiga method ini menggantikan sebagian besar for loop manual di kode modern.