Array punya method bawaan buat mengolah semua isinya sekaligus: menyaring, mengubah, mencari, atau meringkas jadi satu nilai. Kamu cukup bilang apa yang dilakukan ke satu isi, method-nya yang mengulang ke semua isi, jadi gak perlu menulis loop sendiri.
🧪 Tebakan cepat:
[1, 2, 3].map((n) => { n * 2 })hasilnya apa? Tebak dulu, jawabannya ada di bagian "map: ubah tiap isi".
filter: saring isi yang lolos
const foods = ["Nasi Goreng", "Rendang", "Sate", "Gado-gado", "Bakso", "Soto"];
const hasil = foods.filter((food) => food.startsWith("S"));
console.log(hasil); // ["Sate", "Soto"]
console.log(foods); // tetap 6 makanan
foods.filter(...)menjalankan function di dalam kurungnya untuk tiap isi array, satu per satu.(food) => food.startsWith("S")adalah function kecil itu, ditulis sebagai arrow function.foodberisi makanan yang sedang dicek.food.startsWith("S")menjawabtruekalau teksnya diawali huruf S.- Isi yang dijawab
truemasuk ke array baru, yang dijawabfalseditinggal.
Function kecil yang dikirim ke method seperti ini disebut callback. filter gak mengubah array aslinya, dia bikin array baru. Jadi hasilnya harus disimpan di variabel atau langsung di-return, kalau gak, hasilnya hilang.
Buat angka genap, pakai %, sisa pembagian: 7 % 2 hasilnya 1, 8 % 2 hasilnya 0. Angka genap sisanya 0 kalau dibagi 2, jadi syaratnya n % 2 === 0.
map: ubah tiap isi
const harga = [10000, 25000, 5000];
const setengah = harga.map((h) => h / 2);
console.log(setengah); // [5000, 12500, 2500]
map menjalankan callback untuk tiap isi, dan apa pun yang dikembalikan callback jadi isi array baru. Jumlah isinya selalu sama dengan array asli.
Hati-hati dengan kurung kurawal: [1, 2, 3].map((n) => { n * 2 }) hasilnya [undefined, undefined, undefined], karena callback dengan { } gak mengembalikan apa-apa tanpa return. Tulis (n) => n * 2 atau (n) => { return n * 2; }. Itu jawaban tebakan tadi.
find: ambil satu yang pertama cocok
const kota = ["Bandung", "Surabaya", "Solo", "Medan"];
console.log(kota.find((k) => k.startsWith("S"))); // Surabaya
console.log(kota.find((k) => k.startsWith("Z"))); // undefined
find berhenti di isi pertama yang dijawab true dan mengembalikan isi itu sendiri, bukan array. Kalau gak ada yang cocok, hasilnya undefined.
reduce: ringkas jadi satu nilai
const angka = [1, 2, 3, 4];
const total = angka.reduce((acc, n) => acc + n, 0);
console.log(total); // 10
0di akhir adalah nilai awalacc(singkatan accumulator, penampung hasil sementara).- Tiap putaran, callback menerima
accdann(isi yang sedang diproses). Yang dikembalikan jadiaccberikutnya: 0 + 1 = 1, 1 + 2 = 3, 3 + 3 = 6, 6 + 4 = 10.
⚠️ Jebakan yang sering ketemu
forEachgak mengembalikan apa-apa.forEachcuma menjalankan callback untuk tiap isi.const x = arr.forEach(...)isinyaundefined, jadi buat bikin array baru pakaimapataufilter.sort()mengurutkan sebagai teks.[10, 2, 1].sort()hasilnya[1, 10, 2]. Buat angka, tulis.sort((a, b) => a - b).sortjuga mengubah array aslinya.reducetanpa nilai awal. Tanpa0di akhir, isi pertama dipakai sebagai nilai awal, dan array kosong bikin TypeError.
🔬 Coba sendiri
Pilih method dan lihat apa yang dikembalikan callback untuk tiap isi.
TL;DR: Array methods menjalankan callback (function kecil) untuk tiap isi. filter menyimpan isi yang dijawab true, map mengganti tiap isi dengan hasil callback (jumlahnya tetap), find mengambil isi pertama yang cocok, dan reduce((acc, n) => ..., 0) meringkas semua isi jadi satu nilai. filter dan map bikin array baru, jadi simpan atau return hasilnya. Callback dengan { } butuh return. Angka genap: n % 2 === 0.
