Map, filter, dan reduce adalah tiga method array JavaScript yang dipakai untuk mengolah isi array tanpa perlu menulis perulangan for secara manual. Ketiganya sering muncul bersamaan karena menyelesaikan tiga kebutuhan paling umum saat bekerja dengan data: map mengubah setiap elemen, filter menyaring elemen yang lolos syarat, dan reduce meringkas seluruh array menjadi satu nilai. Begitu kamu paham tiga method ini, kode pengolahan data kamu jadi jauh lebih pendek, lebih mudah dibaca, dan lebih jarang bug.

Di panduan ini kamu akan belajar dari nol: apa itu masing-masing method, cara kerjanya lewat contoh nyata, perbedaan intinya dalam satu tabel, sampai kesalahan umum yang sering bikin pemula bingung. Semua contoh memakai istilah berbahasa Indonesia supaya gampang dicerna.

Apa Itu Map, Filter, dan Reduce?

Ketiganya adalah method bawaan yang menempel di setiap array JavaScript. Kamu memanggilnya dengan titik setelah nama array, misalnya angka.map(...). Yang membuatnya spesial: kamu memberi mereka sebuah fungsi, lalu fungsi itu dijalankan otomatis untuk setiap elemen array. Kamu tidak perlu mengatur indeks atau kondisi berhenti seperti pada for.

Perhatikan gambaran singkatnya:

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

angka.map(n => n * 2)              // [2, 4, 6, 8]     → array baru, panjang sama
angka.filter(n => n % 2 === 0)     // [2, 4]           → array baru, lebih pendek
angka.reduce((t, n) => t + n, 0)   // 10               → satu nilai tunggal

Tiga baris itu merangkum semuanya: map selalu mengembalikan array dengan jumlah elemen yang sama, filter mengembalikan array berisi elemen yang lolos saja, dan reduce mengembalikan satu nilai. Kamu bisa mendalami konsep ini secara interaktif lewat pelajaran array methods di Hyper Sheets yang bisa langsung dikerjakan di browser.

Map: Mengubah Setiap Elemen

map dipakai saat kamu ingin mengubah setiap elemen menjadi bentuk baru, sambil menjaga jumlahnya tetap sama. Bayangkan sebuah mesin: setiap barang masuk lewat satu pintu, diproses, lalu keluar lewat pintu lain, jumlah barang tidak berubah, hanya bentuknya.

const harga = [10000, 25000, 50000]

// Beri diskon 10% ke setiap harga
const setelahDiskon = harga.map(h => h * 0.9)
// [9000, 22500, 45000]

Kegunaan paling umum di dunia nyata adalah mengubah array of object, misalnya mengambil satu properti saja:

const users = [
  { nama: 'Budi', umur: 22 },
  { nama: 'Sari', umur: 25 },
]

const namaSaja = users.map(u => u.nama)
// ['Budi', 'Sari']

Filter: Menyaring Elemen

filter dipakai saat kamu ingin menyeleksi elemen, menyimpan yang memenuhi syarat, membuang sisanya. Callback yang kamu berikan harus mengembalikan true (simpan) atau false (buang). Panjang array hasilnya bisa lebih pendek dari aslinya, atau bahkan kosong.

const nilai = [45, 80, 30, 95, 60]

// Ambil hanya nilai yang lulus (>= 70)
const lulus = nilai.filter(n => n >= 70)
// [80, 95]

Sama seperti map, filter sangat berguna pada array of object, misalnya mencari produk yang masih tersedia:

const produk = [
  { nama: 'Kaos', stok: 0 },
  { nama: 'Topi', stok: 5 },
  { nama: 'Tas', stok: 3 },
]

const tersedia = produk.filter(p => p.stok > 0)
// [{ nama: 'Topi', stok: 5 }, { nama: 'Tas', stok: 3 }]

Reduce: Meringkas Jadi Satu Nilai

reduce adalah yang paling sering bikin pemula pusing, padahal idenya sederhana: kumpulkan seluruh array menjadi satu hasil akhir. Bisa berupa angka (total, maksimum), string, bahkan object. Ia bekerja dengan cara “menumpuk” hasil sedikit demi sedikit.

reduce menerima dua argumen: sebuah callback (akumulator, elemen) => ... dan sebuah nilai awal untuk akumulator.

const belanja = [15000, 30000, 5000]

const total = belanja.reduce((akumulator, harga) => akumulator + harga, 0)
// 50000

Alurnya begini: akumulator mulai dari 0 (nilai awal), lalu di setiap langkah ditambah harga saat ini, 0 + 15000, lalu 15000 + 30000, lalu 45000 + 5000, hasil akhirnya 50000.

Coba Sendiri: Map vs Filter vs Reduce

Cara tercepat memahami bedanya adalah melihat ketiganya bekerja pada array yang sama. Ganti mode di bawah (map, filter, atau reduce) dan pilih operasinya, perhatikan bagaimana bentuk hasilnya berbeda: map menghasilkan array sepanjang aslinya, filter array yang lebih pendek, dan reduce cuma satu nilai:

Coba Sendiri

Array awal

123456

↓.map(...)↓

Array baru

24681012

angka.map(n => n * 2)→ [2, 4, 6, 8, 10, 12]

Setelah bermain dengan demo di atas, pola pikirnya akan menempel: tanya dulu “aku mau mengubah, menyaring, atau meringkas?”, jawabannya langsung menunjuk ke method yang tepat.

Perbedaan Map, Filter, dan Reduce

Inilah ringkasan yang paling sering dicari. Kunci memilih method yang benar bukan menghafal sintaksnya, tapi mengenali bentuk hasil yang kamu butuhkan:

Aspek	`map`	`filter`	`reduce`
Tujuan	Mengubah tiap elemen	Menyaring elemen	Meringkas jadi satu nilai
Bentuk hasil	Array (panjang sama)	Array (lebih pendek/sama)	Satu nilai apa saja
Callback mengembalikan	Nilai baru tiap elemen	`true` / `false`	Akumulator
Contoh kebutuhan	Format harga, ambil properti	Cari yang lolos syarat	Total, rata-rata, maksimum
Argumen kedua	,	,	Nilai awal akumulator

Menggabungkan Ketiganya (Chaining)

Karena map dan filter sama-sama mengembalikan array, kamu bisa merangkainya (chaining), hasil satu method langsung dipakai method berikutnya. Ini pola yang sangat umum di kode nyata:

const produk = [
  { nama: 'Kaos', harga: 80000, stok: 3 },
  { nama: 'Topi', harga: 50000, stok: 0 },
  { nama: 'Tas', harga: 120000, stok: 2 },
]

const totalStokTersedia = produk
  .filter(p => p.stok > 0)     // buang yang habis  → Kaos, Tas
  .map(p => p.harga)           // ambil harganya    → [80000, 120000]
  .reduce((t, h) => t + h, 0)  // jumlahkan         → 200000

Dibaca dari atas ke bawah, alurnya jelas seperti kalimat: “saring yang ada stok, ambil harganya, lalu jumlahkan”. Inilah kekuatan gaya deklaratif, kamu mendeskripsikan apa yang diinginkan, bukan bagaimana mengulang satu per satu.

Kenapa Tidak Pakai `for` Saja?

Pertanyaan yang wajar. Perulangan for tetap valid dan kadang lebih cepat, tapi map, filter, dan reduce menang dalam hal keterbacaan dan keamanan. Bandingkan mencari total dengan for:

// Cara for, perlu variabel bantu dan ubah manual
let total = 0
for (let i = 0; i < belanja.length; i++) {
  total = total + belanja[i]
}

Versus reduce yang satu baris dan tidak butuh variabel yang berubah-ubah. Selain lebih ringkas, method-method ini menghilangkan sumber bug klasik for: salah menulis kondisi berhenti (off-by-one), lupa mereset variabel, atau tidak sengaja mengubah array asli. Kalau kamu masih ingin menguatkan dasar perulangan lebih dulu, ulas panduan perulangan JavaScript yang membahas for, while, dan forEach secara lengkap.

Kesalahan Umum Saat Memakai Map, Filter, Reduce

Beberapa jebakan yang sering menimpa pemula:

1. Memakai map padahal tidak butuh hasilnya. Kalau kamu hanya ingin menjalankan sesuatu untuk tiap elemen (misalnya console.log) tanpa membuat array baru, pakai forEach, bukan map. map yang hasilnya tidak dipakai itu pemborosan.

2. Lupa return di dalam kurung kurawal. Seperti dibahas di atas, arr.map(n => { return n * 2 }) benar, tapi arr.map(n => { n * 2 }) menghasilkan undefined. Untuk satu ekspresi, lebih aman tulis tanpa kurung kurawal: arr.map(n => n * 2).

3. Menghilangkan nilai awal reduce pada array yang mungkin kosong. [].reduce((t, n) => t + n) akan melempar TypeError. Dengan nilai awal [].reduce((t, n) => t + n, 0) aman menghasilkan 0.

4. Salah memilih method. Kalau hasil yang kamu mau adalah array baru dengan panjang sama, itu map. Kalau array lebih pendek, itu filter. Kalau satu nilai, itu reduce. Tanyakan bentuk hasilnya dulu.

Cek Pemahaman

Apa hasil dari [1, 2, 3, 4].reduce((total, n) => total + n, 0)?

FAQ Seputar Map, Filter, dan Reduce

Apa perbedaan utama map, filter, dan reduce?

Perbedaannya ada pada bentuk hasil. map mengubah tiap elemen dan mengembalikan array dengan panjang sama. filter menyaring dan mengembalikan array berisi elemen yang lolos saja (bisa lebih pendek). reduce meringkas seluruh array menjadi satu nilai tunggal (angka, string, atau object).

Kapan harus pakai map dan kapan pakai forEach?

Pakai map kalau kamu butuh array baru hasil transformasi. Pakai forEach kalau kamu hanya ingin menjalankan aksi untuk tiap elemen (seperti mencetak ke konsol) tanpa membutuhkan array hasil. Menggunakan map tapi mengabaikan return-nya adalah pemakaian yang keliru.

Apakah reduce bisa menghasilkan array atau object, bukan cuma angka?

Bisa. reduce sangat fleksibel, nilai awal dan akumulatornya bisa berupa apa saja. Kamu bisa memakainya untuk mengelompokkan data menjadi object, membuat array dari data lain, atau bahkan meniru fungsi map dan filter. Karena itu reduce disebut method array yang paling powerful sekaligus paling sulit.

Apakah map, filter, dan reduce mengubah array aslinya?

Tidak. Ketiganya selalu mengembalikan data baru dan membiarkan array asli tetap utuh (immutable). Ini berbeda dari method seperti sort() atau push() yang mengubah array di tempat. Sifat immutable inilah yang membuat mereka aman dipakai, terutama saat mengelola state di React.

Bagaimana cara menghitung rata-rata dengan reduce?

Jumlahkan dulu dengan reduce, lalu bagi dengan length: const rata = angka.reduce((t, n) => t + n, 0) / angka.length. Untuk array [10, 20, 30], totalnya 60 dibagi 3 menghasilkan 20.

Langkah Selanjutnya

Setelah menguasai map, filter, dan reduce, konsep-konsep berikut akan terasa jauh lebih mudah karena saling terkait:

Arrow function, sintaks ringkas yang hampir selalu dipakai sebagai callback ketiga method ini.
Chaining, merangkai filter lalu map lalu reduce untuk membangun pipeline data yang rapi.
React rendering, di React, map adalah cara standar mengubah array data menjadi daftar elemen di layar.

Map, filter, dan reduce adalah fondasi pengolahan data di JavaScript modern, begitu terbiasa, kamu akan jarang menulis for lagi. Untuk latihan bertahap dengan umpan balik langsung, kerjakan materi array methods di Hyper Sheets. Semakin sering kamu menuliskannya, semakin alami rasanya membaca kode sebagai rangkaian transformasi data yang bersih.