Array.reduce: Agregasi

1. Analogi: Kasir Menutup Buku

Bayangkan seorang kasir menutup tokonya di malam hari. Di meja ada tumpukan struk belanja: Rp15.000, Rp8.000, Rp20.000, dan seterusnya. Kasir itu tidak peduli tiap struk satu per satu; dia hanya butuh SATU angka: total omzet hari ini. Caranya? Dia mengambil kalkulator, mulai dari angka 0, lalu menjumlahkan tiap struk satu per satu sampai tumpukannya habis.

Itulah persis cara kerja reduce. Ia menerima array (tumpukan struk), membawa sebuah "tas penampung" bernama akumulator (kalkulator kasir yang dimulai dari 0), mengunjungi tiap elemen satu per satu, dan pada akhirnya mengembalikan SATU nilai. Tidak peduli array-nya berisi 5 atau 5.000 elemen, hasilnya tetap satu nilai.

2. Kenapa reduce Ada?

JavaScript sudah punya map dan filter, tapi keduanya selalu mengembalikan array. map mengubah N elemen menjadi N elemen baru. filter menyaring N elemen menjadi M elemen. Lalu bagaimana kalau yang kamu butuhkan bukan array, melainkan satu nilai tunggal?

• Total belanja dari keranjang.
• Nilai rata-rata rapor satu kelas.
• Nilai tertinggi dalam daftar.
• Mengelompokkan daftar nama berdasarkan huruf awal.

Tanpa reduce, kamu terpaksa menulis loop manual dengan variabel penampung, dan pola itu rawan salah: lupa inisialisasi variabel, lupa menambahkan, atau salah kondisi berhenti. reduce membungkus pola "loop + penampung" menjadi satu method yang rapi dan mudah dibaca. Saat programmer lain melihat reduce, mereka langsung paham maksudmu: "array ini dilipat menjadi satu nilai".

3. Cara Kerja: Akumulator

const angka = [1, 2, 3, 4, 5];
const total = angka.reduce((acc, n) => {
  return acc + n;
}, 0);
console.log(total); // 15

Parameter callback adalah (akumulator, elemenSaatIni, index, array); dua yang pertama paling penting. Angka 0 di ujung adalah nilai awal akumulator, isi tas sebelum loop dimulai.

Mari ikuti perjalanan akumulatornya selangkah demi selangkah:

• Iterasi 1: acc = 0, n = 1, return 1
• Iterasi 2: acc = 1, n = 2, return 3
• Iterasi 3: acc = 3, n = 3, return 6
• Iterasi 4: acc = 6, n = 4, return 10
• Iterasi 5: acc = 10, n = 5, return 15

Setelah elemen terakhir, reduce mengembalikan isi tas terakhir: 15. Kuncinya cuma satu: setiap iterasi harus me-return isi tas yang baru. Kalau lupa return, tasnya jadi undefined dan iterasi berikutnya rusak total.

4. Contoh Bertahap: Sederhana ke Realistis

Contoh 1, rata-rata nilai rapor:

const nilai = [80, 90, 70, 100];
const total = nilai.reduce((acc, n) => acc + n, 0);
const rata = total / nilai.length;
console.log(rata); // 85

Contoh 2, mencari nilai tertinggi:

const nilai2 = [80, 90, 70, 100];
const tertinggi = nilai2.reduce((acc, n) => (n > acc ? n : acc), 0);
console.log(tertinggi); // 100

Contoh 3 (realistis), total belanja dan grouping nama:

const keranjang = [
  { nama: "Kopi", harga: 15000, qty: 2 },
  { nama: "Roti", harga: 8000, qty: 3 },
];
const totalBayar = keranjang.reduce((acc, item) => acc + item.harga * item.qty, 0);
console.log(totalBayar); // 54000

const siswa = ["Andi", "Ani", "Budi", "Citra"];
const grup = siswa.reduce((acc, nama) => {
  const awal = nama[0];
  acc[awal] = acc[awal] || [];
  acc[awal].push(nama);
  return acc;
}, {});
console.log(grup);
// { A: ["Andi", "Ani"], B: ["Budi"], C: ["Citra"] }

Perhatikan baik-baik: hasil reduce tidak harus angka. Nilai awal menentukan bentuk hasilnya. Nilai awal 0 menghasilkan angka, {} menghasilkan object, [] menghasilkan array baru. Ini trik penting: saat bingung, tanyakan "hasil akhirnya mau berbentuk apa?", lalu jadikan itu nilai awal.

5. Kesalahan Umum Pemula: SALAH vs BENAR

Kesalahan 1: lupa me-return akumulator.

SALAH:

const total = [1, 2, 3].reduce((acc, n) => {
  acc + n; // dihitung tapi tidak di-return!
}, 0);
console.log(total); // undefined

BENAR:

const total = [1, 2, 3].reduce((acc, n) => {
  return acc + n;
}, 0);
console.log(total); // 6

Atau pakai arrow satu baris yang otomatis return: (acc, n) => acc + n.

Kesalahan 2: tidak memberi nilai awal.

SALAH:

const total = [].reduce((acc, n) => acc + n); // ERROR!

Tanpa nilai awal, reduce memakai elemen pertama array sebagai akumulator awal. Untuk array kosong itu mustahil, jadi program error. Bahkan untuk array berisi pun ini berbahaya: tipe hasilnya jadi tidak jelas dan satu elemen bisa hilang dari perhitungan.

BENAR: selalu beri nilai awal yang sesuai kebutuhan: 0 untuk penjumlahan, 1 untuk perkalian, {} untuk object, [] untuk array.

Kesalahan 3: mengira reduce mengubah array asli. Tidak. reduce hanya membaca array dan mengembalikan nilai baru. Array aslinya tetap utuh, jadi aman dipakai ulang.

6. Ringkasan

reduce melipat array menjadi satu nilai lewat akumulator yang dibawa dari satu iterasi ke iterasi berikutnya. Selalu beri nilai awal, selalu return akumulator di tiap iterasi, dan pilih nilai awal yang cocok dengan bentuk hasil yang kamu mau. Begitu pola ini dikuasai, total belanja, rata-rata nilai, dan grouping data berubah menjadi satu baris kode yang elegan dan bebas bug loop manual.