Menguasai Array Methods: Map, Filter, dan Reduce di JavaScript

Pendahuluan

Halo, rekan developer! Senang sekali bisa bertemu kembali di tutorial ke-7 dalam seri pembuatan Aplikasi Kuis Interaktif kita. Pada artikel sebelumnya, kita sudah belajar cara memberikan “nyawa” pada tombol-tombol di kuis kita menggunakan Event Listener. Kita sudah bisa mendeteksi kapan pengguna mengklik jawaban, namun ada satu tantangan besar yang tersisa: bagaimana cara kita mengolah data pertanyaan, menyaring jawaban yang benar, dan menghitung skor akhir secara efisien?

Di sinilah kita membutuhkan kekuatan dari Array Methods. Dalam pengembangan aplikasi modern, kita jarang sekali menggunakan perulangan for konvensional untuk memanipulasi data. Mengapa? Karena for loop cenderung bersifat imperative—kamu harus memberi tahu komputer langkah demi langkah cara melakukannya. Sebaliknya, JavaScript menyediakan metode declarative seperti .map(), .filter(), dan .reduce().

Dengan metode ini, kode kamu akan menjadi jauh lebih bersih, lebih mudah dibaca, dan terlihat profesional layaknya standar senior developer. Di artikel ini, kita akan membedah ketiga metode tersebut satu per satu dan langsung menerapkannya ke dalam logika perhitungan skor pada proyek kuis kita. Mari kita mulai!

Memahami Array Method .map()

Metode .map() adalah salah satu metode yang paling sering digunakan dalam dunia pengembangan web, terutama saat kamu bekerja dengan framework seperti React atau Vue. Kegunaan utama .map() adalah untuk mentransformasi setiap elemen dalam array menjadi bentuk yang baru, tanpa mengubah array aslinya.

Bayangkan kamu memiliki sebuah array berisi nama-nama peserta kuis, dan kamu ingin mengubah semua nama tersebut menjadi huruf kapital agar seragam saat ditampilkan di papan skor.

// Array awal berisi nama peserta
const pesertaKuis = ["budi", "s#iti", "andi", "dewi"];

// Menggunakan .map() untuk mengubah setiap nama menjadi uppercase
const pesertaFormatted = pesertaKuis.map((nama) => {
  return nama.toUpperCase();
});

console.log(pesertaFormatted); 
// Output: ["BUDI", "S#ITI", "ANDI", "DEWI"]

// Array asli tetap tidak berubah
console.log(pesertaKuis); 
// Output: ["budi", "s#iti", "andi", "dewi"]

Dalam contoh di atas, .map() mengambil setiap elemen satu per satu, menjalankan fungsi transformasi (dalam hal ini toUpperCase()), dan mengembalikan array baru dengan hasil transformasi tersebut. Perhatikan bahwa array pesertaKuis tetap asli; ini adalah prinsip penting dalam functional programming yaitu immutability.

Memahami Array Method .filter()

Jika .map() digunakan untuk mengubah bentuk, maka .filter() digunakan untuk menyaring atau memilih elemen mana saja yang memenuhi kriteria tertentu. Metode ini akan mengecek setiap elemen menggunakan sebuah kondisi (boolean). Jika kondisinya true, elemen tersebut masuk ke array baru; jika false, elemen tersebut dibuang.

Misalkan kita sedang membuat fitur di aplikasi kuis kita untuk menampilkan hanya pertanyaan dengan tingkat kesulitan “mudah”.

const daftarPertanyaan = [
  { id: 1, teks: "1 + 1 = ?", level: "mudah" },
  { id: 2, teks: "2 * 5 = ?", level: "sedang" },
  { id: 3, teks: "10 / 2 = ?", level: "mudah" },
  { id: 4, teks: "15 * 3 = ?", level: "sulit" }
];

// Menyaring hanya pertanyaan dengan level 'mudah'
const pertanyaanMudah = daftarPertanyaan.filter((item) => {
  return item.level === "mudah";
});

console.log(pertanyaanMudah);
/* 
Output:
[
  { id: 1, teks: "1 + 1 = ?", level: "mudah" },
  { id 'id: 3, teks: "10 / 2 = ?", level: "mudah" }
]
*/

Dengan .filter(), kamu bisa dengan mudah membuat fitur pencarian, kategori, atau filter harga seperti yang sering kamu temui saat belanja di Tokopedia atau Shopee.

Memahami Array Method .reduce()

Metode .reduce() adalah yang paling kuat sekaligus yang paling menantang bagi pemula. Kegunaan utamanya adalah untuk mengakumulasi seluruh elemen dalam array menjadi satu nilai tunggal. Nilai tunggal ini bisa berupa angka, string, objek, bahkan array baru.

Mari kita gunakan contoh yang lebih dekat dengan kehidupan sehari-hari di Indonesia: menghitung total belanjaan di keranjang belanja sebuah aplikasi e-commerce.

const keranjangBelanja = [
  { produk: "Kopi Kenangan", harga: 25000 },
  { produk: "Indomie Goreng", harga: 3500 },
  { produk: "Roti Tawar", harga: 15000 }
];

// Menggunakan .reduce() untuk menjumlahkan total harga
// 'accumulator' adalah tempat menyimpan hasil penjumlahan sementara
// 'currentValue' adalah item yang sedang diproses
const totalBayar = keranjangBelanja.reduce((accumulator, currentValue) => {
  return accumulator + currentValue.harga;
}, 0); // Angka 0 di sini adalah 'initial value' (nilai awal)

console.log(`Total yang harus dibayar: Rp${totalBayar}`);
// Output: Total yang harus dibayar: Rp43500

Sangat penting untuk selalu menyertakan initial value (dalam contoh ini adalah 0) pada .reduce(). Jika tidak, JavaScript akan menggunakan elemen pertama array sebagai nilai awal, yang bisa menyebabkan error jika kamu mencoba mengakses properti objek (seperti .harga).

Implementasi dalam Proyek

Sekarang, mari kita terapkan semua ilmu ini ke dalam proyek Aplikasi Kuis Interaktif kita. Kita akan menggunakan .filter() untuk mengambil pertanyaan yang benar saja, .map() untuk mengambil teks pertanyaannya, dan .reduce() untuk menghitung skor akhir.

Berikut adalah cuplikan logika utama dalam file script.js kita:

// Data hasil jawaban pengguna
const jawabanPengguna = [
  { pertanyaanId: 1, benar: true },
  { pertanyaanId: 2, benar: false },
  { pertanyaanId: 3, true: true },
  { pertanyaanId: 4, benar: false }
];

// 1. Menggunakan .filter() untuk mendapatkan jawaban yang benar saja
const jawabanBenar = jawabanPengguna.filter(item => item.benar === true);

// 2. Menghitung skor akhir menggunakan .reduce()
// Kita menghitung total jawaban benar
const skorAkhir = jawabanBenara.reduce((total, item) => {
  return total + 1;
}, 0);

// 3. Menggunakan .map() untuk membuat ringkasan teks untuk laporan
const ringkasanLaporan = jawabanPengguna.map((item, index) => {
  return `Pertanyaan ${index + 1}: ${item.benar ? '✅ Benar' : '❌ Salah'}`;
});

console.log("Skor Anda:", skorAkhir);
console.log("Laporan Detail:", ringkasanLaporan);

Dengan menggunakan teknik ini, kode kita menjadi sangat bersih (clean code), deklaratif, dan mudah dibaca oleh developer lain.

Kesimpulan

Menguasai map, filter, dan reduce adalah langkah krusial untuk menjadi seorang JavaScript Developer yang handal. Ketiga metode ini memungkinkan kita memanipulasi data kompleks dengan cara yang elegan tanpa perlu menulis banyak perulangan for yang berantakan.

Tips Pro: Selalu ingat bahwa map dan filter menghasilkan array baru, sedangkan reduce menghasilkan satu nilai tunggal. Jangan sampai tertukar!