Fundamental Array Method di JavaScript: map, filter, reduce, forEach, find

Dokumentasi ini menjelaskan method bawaan Array di JavaScript yang paling sering dipakai, termasuk saat looping data di React/Next.js.

Konsep Dasar

Semua method berikut (map, filter, reduce, forEach, dll):

  • Dipanggil langsung dari sebuah array: array.map(...)
  • Menerima fungsi sebagai argumen (disebut callback)
  • Callback dijalankan untuk setiap elemen di array, satu per satu

Perbedaan utamanya ada di apa yang dikembalikan (return) dari proses looping tersebut.

1. map() — Mengubah Tiap Elemen, Hasilnya Array Baru

Dipakai kalau kamu mau mengubah bentuk tiap elemen, tapi jumlah elemennya tetap sama.

const angka = [1, 2, 3, 4]
const kaliDua = angka.map((n) => n * 2)

console.log(kaliDua) // [2, 4, 6, 8]

Contoh nyata di React — ubah data users jadi elemen JSX <tr>:

{users.map((user) => (
  <tr key={user.id.toString()}>
    <td>{user.name}</td>
  </tr>
))}

Poin penting: map() selalu menghasilkan array baru dengan panjang yang sama dengan array asal.

2. filter() — Menyaring Elemen, Hasilnya Array Baru (Bisa Lebih Pendek)

Dipakai kalau kamu mau mengambil sebagian elemen saja berdasarkan kondisi tertentu.

const angka = [1, 2, 3, 4, 5, 6]
const genap = angka.filter((n) => n % 2 === 0)

console.log(genap) // [2, 4, 6]

Callback di filter harus mengembalikan true atau false:

  • true → elemen dipertahankan
  • false → elemen dibuang

Contoh nyata: cuma tampilkan user yang levelnya admin:

const adminOnly = users.filter((user) => user.level === 'admin')

3. forEach() — Cuma Looping, Tidak Menghasilkan Array Baru

Dipakai kalau kamu cuma mau melakukan sesuatu untuk tiap elemen (misal console.log, simpan ke variabel luar), tanpa butuh array hasil.

const nama = ['Andi', 'Budi', 'Citra']
nama.forEach((n) => console.log(`Halo, ${n}`))

Beda penting dari map: forEach tidak return apa-apa (undefined). Jangan dipakai kalau niatnya bikin array baru — itu tugasnya map. Di JSX React, pakai forEach tidak akan menampilkan apa pun.

4. reduce() — Meringkas Array Jadi Satu Nilai

Dipakai kalau kamu mau menggabungkan/meringkas semua elemen jadi satu hasil (total, rata-rata, objek gabungan, dll).

const harga = [10000, 20000, 5000]
const total = harga.reduce((akumulator, item) => akumulator + item, 0)

console.log(total) // 35000

Cara bacanya:

  • akumulator = nilai yang "dibawa" dari perulangan sebelumnya
  • 0 di akhir = nilai awal akumulator
  • Tiap elemen, akumulator di-update sesuai logika kamu

reduce paling sering bikin bingung pemula, tapi sangat fleksibel — bisa dipakai untuk membuat ulang logika map dan filter secara manual kalau perlu.

5. find() — Cari Satu Elemen yang Cocok, Berhenti Begitu Ketemu

const users = [
  { id: 1, name: 'Andi' },
  { id: 2, name: 'Budi' },
]

const user = users.find((u) => u.id === 2)
console.log(user) // { id: 2, name: 'Budi' }

Beda dari filter: find hanya mengembalikan satu objek (bukan array), dan berhenti mencari begitu ketemu yang pertama cocok. Kalau tidak ketemu, hasilnya undefined.

6. some() dan every() — Mengecek Kondisi, Hasilnya Boolean

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

angka.some((n) => n > 3)   // true, karena ADA yang lebih dari 3
angka.every((n) => n > 3)  // false, karena TIDAK SEMUA lebih dari 3

Tabel Ringkasan

Method Return Kapan Dipakai
map Array baru, panjang sama Mengubah bentuk tiap elemen
filter Array baru, bisa lebih pendek Menyaring elemen sesuai kondisi
forEach undefined Sekadar looping, tanpa butuh hasil baru
reduce Satu nilai (angka, objek, dll) Meringkas/menggabungkan array
find Satu elemen atau undefined Cari satu data spesifik
some / every true / false Cek kondisi ada/semua elemen

Kenapa Ini Penting di React/Next.js

JSX tidak punya perulangan for bawaan di dalam return(). Karena itu, map() wajib dipakai untuk render list — seperti pada contoh route /users dan /roles di tutorial sebelumnya. Kalau mencoba forEach di dalam JSX, tidak akan muncul apa pun karena hasilnya undefined, bukan array elemen JSX.

Contoh Kombinasi filter + map (Umum Dipakai Bersamaan)

// Tampilkan hanya user aktif, dalam bentuk daftar nama saja
const namaUserAktif = users
  .filter((user) => user.status === 'active')
  .map((user) => user.name)

Pola ini sangat umum: filter dulu untuk menyaring data yang relevan, baru map untuk mengubah bentuknya sesuai kebutuhan tampilan.