Metode Array JavaScript: map, filter, reduce, dan Kawan-kawannya

Begitu kamu bisa menyimpan sekumpulan nilai di dalam array, hal berikutnya yang pasti kamu inginkan adalah melakukan sesuatu ke semuanya sekaligus — mengubah tiap harga jadi harga diskon, menyaring biar yang tersisa cuma barang yang masih ada stok, atau menjumlahkan satu kolom angka. Kamu bisa saja menulis loop manual tiap kali butuh, dan itu sah-sah saja. Tapi array JavaScript sudah dibekali satu set metode bawaan yang mengurus pola-pola seperti ini untukmu — hasilnya lebih ringkas, lebih jelas, dan jauh lebih enak dibaca begitu kamu paham cara kerjanya.

Topik ini termasuk yang menyenangkan, karena cukup segelintir metode saja sudah mencakup mayoritas besar kode nyata. Kita bakal fokus ke metode-metode itu, menunjukkan persis apa yang dikembalikan masing-masing, dan menandai jebakan yang sering bikin orang kepleset. Kalau dasar array-nya masih belum mantap, mulai dulu dari artikel array dan objek, dan artikel perulangan menunjukkan cara manual yang nantinya digantikan oleh metode-metode ini.

Apa itu metode array?

Metode array itu cuma sebuah fungsi yang menempel pada array. Kamu memanggilnya pakai titik — array.metode(...) — dan ia mengerjakan sesuatu yang berkaitan dengan isi array tersebut. Kita sudah ketemu beberapa yang sederhana (push, pop) di artikel array. Kali ini yang kita incar adalah metode iterasi: yang berjalan menyusuri tiap item dan membiarkan kamu menyodorkan sebuah fungsi kecil yang menjelaskan apa yang mau dilakukan ke tiap item itu.

“Fungsi kecil yang kamu sodorkan” inilah inti idenya. Kebanyakan metode ini menerima sebuah callback — yaitu fungsi yang kamu serahkan, lalu dijalankan oleh si metode satu kali untuk tiap item. Kalau istilah callback masih asing, baca ulang sebentar artikel fungsi bakal sangat membantu di sini, soalnya arrow function muncul di hampir semua contoh di bawah.

const angka = [1, 2, 3, 4];

// callback berjalan sekali per item, menerima item itu sebagai `n`
angka.forEach((n) => {
  console.log(n);   // mencetak 1, lalu 2, lalu 3, lalu 4
});

forEach adalah yang paling sederhana di antara semuanya: ia menjalankan callback-mu untuk tiap item, dan tidak mengembalikan apa pun. Ini pengganti yang bersih untuk loop for biasa kalau yang kamu mau cuma bertindak atas tiap item — mencetaknya, menambahkannya ke halaman — tanpa membangun nilai baru.

map: ubah setiap item

map mungkin metode yang paling sering kamu pakai. Ia membangun array yang benar-benar baru dengan cara menjalankan callback-mu pada tiap item lalu mengumpulkan apa pun yang dikembalikan callback itu. Array aslinya dibiarkan utuh.

const harga = [100, 250, 80];

const denganPajak = harga.map((h) => h * 1.1);

console.log(denganPajak);   // [110, 275, 88.00000000000001]
console.log(harga);         // [100, 250, 80] — tidak berubah

Satu item masuk, satu item keluar — map selalu mengembalikan array baru dengan panjang yang sama. Itu model pikirnya: ia memetakan tiap input ke output yang bersesuaian. Metode ini bersinar saat kamu mau menata ulang data, misalnya menarik satu field dari sebuah daftar objek:

const pengguna = [
  { nama: "John Doe", umur: 28 },
  { nama: "Jane Doe", umur: 34 },
];

const namaSemua = pengguna.map((u) => u.nama);
console.log(namaSemua);   // ["John Doe", "Jane Doe"]

filter: simpan hanya yang kamu mau

filter juga mengembalikan array baru, tapi alih-alih mengubah item, ia menyeleksi-nya. Callback-mu mengembalikan true untuk menyimpan item atau false untuk membuangnya. Hasilnya cuma berisi item-item yang lolos uji — jadi panjangnya bisa lebih pendek dari aslinya (bisa juga kosong, atau malah utuh).

const angka = [4, 9, 12, 3, 20, 7];

const besar = angka.filter((n) => n >= 10);
console.log(besar);   // [12, 20]

Callback di sini berupa kondisi — apa saja yang menghasilkan nilai benar atau salah. Itu membuat filter pas banget untuk kebutuhan seperti “hanya produk yang ada stok” atau “hanya tugas yang sudah selesai”:

const produk = [
  { nama: "Keyboard", adaStok: true },
  { nama: "Mouse", adaStok: false },
  { nama: "Monitor", adaStok: true },
];

const tersedia = produk.filter((p) => p.adaStok);
console.log(tersedia.length);   // 2

Patokan gampang yang bisa kamu pegang: map mempertahankan panjang dan mengubah isinya; filter mempertahankan isinya dan mengubah panjangnya. Keduanya berpasangan dengan apik — saring dulu sampai yang penting saja, lalu petakan jadi bentuk yang kamu butuhkan.

reduce: peras daftar jadi satu nilai

reduce adalah yang paling bertenaga sekaligus paling bikin keder di antara ketiganya, tapi ide di baliknya sederhana: ia mengambil seluruh array dan meringkasnya jadi satu nilai — sebuah jumlah, nilai terbesar, objek gabungan, atau apa pun yang sedang kamu susun.

Cara kerjanya dengan membawa sebuah accumulator selama ia menyusuri array. Callback-mu menerima accumulator-sejauh-ini dan item saat ini, lalu mengembalikan accumulator yang baru. Kamu juga memberi reduce sebuah nilai awal sebagai argumen keduanya.

const angka = [10, 20, 30, 40];

const total = angka.reduce((jumlah, n) => jumlah + n, 0);
//                          ^acc     ^item        ^nilai awal
console.log(total);   // 100

Langkah demi langkahnya: dimulai dengan jumlah = 0, lalu 0 + 10 = 10, lalu 10 + 20 = 30, lalu 30 + 30 = 60, lalu 60 + 40 = 100. Accumulator terakhir itulah jawabannya. Pola yang sama bisa menjumlahkan total keranjang dari sekumpulan objek:

const keranjang = [
  { nama: "Keyboard", harga: 250000 },
  { nama: "Mouse", harga: 120000 },
];

const total = keranjang.reduce((jumlah, item) => jumlah + item.harga, 0);
console.log(total);   // 370000

find dan findIndex: ambil kecocokan pertama

Kadang yang kamu mau bukan daftar hasil saringan, melainkan satu item tertentu. find mengembalikan elemen pertama yang membuat callback-mu bernilai true, dan langsung berhenti mencari begitu ketemu. Kalau tidak ada yang cocok, ia mengembalikan undefined.

const pengguna = [
  { id: 1, nama: "John Doe" },
  { id: 2, nama: "Jane Doe" },
];

const orang = pengguna.find((u) => u.id === 2);
console.log(orang.nama);   // "Jane Doe"

const tidakAda = pengguna.find((u) => u.id === 99);
console.log(tidakAda);     // undefined

findIndex adalah saudaranya yang mengembalikan posisi kecocokan pertama, bukan itemnya — berguna saat kamu perlu mengubah atau menghapus elemen itu. Ia mengembalikan -1 kalau tidak ada yang cocok.

const index = pengguna.findIndex((u) => u.id === 2);
console.log(index);   // 1

Bedanya filter dan find perlu dijelaskan terus terang: filter selalu mengembalikan array (bisa berisi banyak item, bisa juga kosong), sedangkan find mengembalikan satu item saja (atau undefined). Kalau yang kamu butuh cuma satu, find lebih jelas sekaligus lebih cepat, karena ia berhenti di kecocokan pertama.

some dan every: ajukan pertanyaan ya/tidak

Dua metode ini mengembalikan boolean biasa — true atau false — yang membuatnya pas untuk pengecekan dan penjagaan. some bertanya “apakah paling tidak ada satu item yang lolos uji?” dan every bertanya “apakah semua item lolos?”

const usia = [22, 17, 31, 40];

const adaAnak = usia.some((u) => u < 18);
console.log(adaAnak);   // true — 17 di bawah 18

const semuaDewasa = usia.every((u) => u >= 18);
console.log(semuaDewasa);  // false — 17 gagal lolos uji

Pakai dua ini setiap kali kamu memvalidasi sebuah daftar: “apakah ada field yang kosong?” (some), “apakah semua input form valid?” (every). Keduanya jauh lebih bersih ketimbang menulis loop dengan variabel penanda, dan seperti find, keduanya juga berhenti lebih awal — some berhenti di true pertama, every berhenti di false pertama.

includes dan indexOf: apakah nilai ini ada di array?

Untuk pengecekan sederhana “apakah nilai ini ada?” pada array berisi nilai primitif (string, angka), includes adalah jawaban paling langsung. Ia mengembalikan boolean.

const buah = ["apel", "pisang", "ceri"];

console.log(buah.includes("pisang"));   // true
console.log(buah.includes("mangga"));   // false

indexOf menjawab pertanyaan yang sedikit berbeda — di mana nilai itu? — dengan mengembalikan index-nya, atau -1 kalau tidak ada.

console.log(buah.indexOf("ceri"));     // 2
console.log(buah.indexOf("mangga"));   // -1

sort: mengurutkan item (dan jebakan angkanya)

sort menata ulang array di tempat (ia mengubah array aslinya) sekaligus mengembalikannya. Tanpa argumen, ia mengurutkan sebagai string, dan inilah persis kejutan yang dialami kebanyakan orang saat berurusan dengan angka:

const angka = [10, 1, 5, 20, 3];

angka.sort();
console.log(angka);   // [1, 10, 20, 3, 5] — bukan yang kamu harapkan!

Karena urutan bawaan membandingkan item sebagai teks, "10" muncul sebelum "3" (sama seperti "b" muncul sebelum "c"). Untuk mengurutkan angka dengan benar, beri sebuah fungsi pembanding: ia harus mengembalikan angka negatif kalau a mestinya lebih dulu, angka positif kalau b lebih dulu, dan 0 kalau keduanya setara.

angka.sort((a, b) => a - b);   // menaik (ascending)
console.log(angka);            // [1, 3, 5, 10, 20]

angka.sort((a, b) => b - a);   // menurun (descending)
console.log(angka);            // [20, 10, 5, 3, 1]

Beberapa lagi yang layak diketahui

Yang ini mungkin tidak kamu pakai tiap hari, tapi melengkapi kotak perkakasmu:

const a = [1, 2, 3];
const b = [4, 5];

// concat / spread — menggabungkan array jadi array baru
console.log(a.concat(b));   // [1, 2, 3, 4, 5]
console.log([...a, ...b]);  // [1, 2, 3, 4, 5] (versi modern)

// slice — menyalin sebagian (TIDAK mengubah asli)
console.log(a.slice(0, 2));   // [1, 2]

// join — mengubah array jadi string
console.log(a.join("-"));     // "1-2-3"

// reverse — membalik urutan (MENGUBAH asli, seperti sort)
console.log([1, 2, 3].reverse());   // [3, 2, 1]

// flat — meratakan array bersarang satu tingkat
console.log([1, [2, 3], [4]].flat());   // [1, 2, 3, 4]

Catatan singkat soal slice versus splice, karena namanya nyaris kembar: slice menyalin sepotong dan membiarkan aslinya, sedangkan splice mengubah dengan menghapus atau menyisipkan item di tempat. Nama yang mirip ini sering jadi sumber bug betulan, jadi perlu kamu bedakan baik-baik.

Merangkai metode jadi satu

Karena map, filter, dan kawan-kawannya masing-masing mengembalikan array baru, kamu bisa merangkainya (chaining) — menderetkan beberapa langkah yang terbaca dari atas ke bawah seperti deskripsi apa yang kamu inginkan:

const pesanan = [
  { item: "Keyboard", harga: 250000, lunas: true },
  { item: "Mouse", harga: 120000, lunas: false },
  { item: "Monitor", harga: 1500000, lunas: true },
];

const totalLunas = pesanan
  .filter((o) => o.lunas)              // simpan hanya pesanan yang lunas
  .map((o) => o.harga)                 // tarik keluar harganya
  .reduce((jumlah, h) => jumlah + h, 0); // jumlahkan semuanya

console.log(totalLunas);   // 1750000

Baca baris per baris: simpan pesanan yang lunas, ambil harganya, jumlahkan. Keterbacaan semacam inilah alasan utama metode-metode ini ada. Loop for bisa saja melakukan tugas yang sama, tapi ia mencampur ketiga langkah jadi satu dan lebih susah diikuti sekilas pandang.

Mengubah vs tidak mengubah: pembeda yang krusial

Satu hal terpenting yang harus kamu pegang adalah metode mana yang mengubah array asli dan mana yang mengembalikan array baru. Mencampuradukkan ini jadi penyebab sebagian besar bug array.

• Mengembalikan array baru, membiarkan yang asli: map, filter, slice, concat, flat, serta metode pembaca seperti find, some, every, includes, indexOf, reduce, join.
• Mengubah array asli di tempat: push, pop, shift, unshift, sort, reverse, splice.

Kalau ragu, condonglah ke versi yang tidak mengubah — lebih gampang dipikirkan karena tidak ada yang berubah diam-diam di belakangmu. Kalau kamu perlu mengurutkan atau membalik tanpa mengusik sumbernya, buat salinannya dulu pakai operator spread: [...arr].sort().

Penutup

Sekarang kamu sudah pegang metode-metode array yang jadi tenaga utama mayoritas kode JavaScript:

• forEach menjalankan callback pada tiap item dan tidak mengembalikan apa pun — pakai untuk efek samping.
• map mengubah tiap item jadi array baru dengan panjang yang sama.
• filter hanya menyimpan item yang lolos uji, dan mengembalikan array baru (bisa lebih pendek).
• reduce meringkas array jadi satu nilai lewat accumulator — selalu beri nilai awal.
• find/findIndex mengembalikan item cocok pertama atau index-nya; some/every menjawab pertanyaan ya/tidak; includes/indexOf memeriksa nilai yang sudah pasti.
• sort mengubah array asli dan default-nya urutan string — beri (a, b) => a - b untuk angka.
• Kenali metode mana yang mengubah (push, pop, sort, reverse, splice) versus yang mengembalikan array baru (map, filter, slice, concat), lalu rangkai yang tidak mengubah untuk pipeline yang rapi dan enak dibaca.

Kuasai map, filter, dan reduce lebih dulu — bertiga saja sudah menangani porsi terbesar dari semua pekerjaan daftar yang akan kamu temui. Sisanya bakal masuk dengan sendirinya begitu tiga itu klik di kepalamu. Berikutnya, kita bakal menggali objek lebih dalam, separuh lainnya dari cara JavaScript menyimpan data yang terstruktur.