Cara Menggunakan reduce() di JavaScript untuk Agregasi Data

Pernahkah kamu menghadapi situasi di mana kamu memiliki sebuah array berisi data objek yang panjang, lalu kamu harus menghitung total nilai, mengelompokkannya berdasarkan kategori tertentu, atau bahkan mengubah strukturnya menjadi format yang sama sekali baru? Di sinilah fungsi reduce() di JavaScript unjuk gigi.

Bagi sebagian developer, terutama yang baru terjun ke dunia JavaScript, reduce() sering kali dianggap sebagai metode array yang paling membingungkan jika dibandingkan dengan saudaranya seperti map() atau filter(). Namun, begitu kamu memahami logika di balik cara kerjanya, reduce() akan menjadi senjata andalanmu untuk meringkas baris kode menjadi jauh lebih bersih, efisien, dan mudah dirawat.

Yuk, kita bedah bersama bagaimana cara kerja metode ini, mulai dari konsep dasar yang paling sederhana hingga penerapannya pada kasus nyata yang sering kamu temui saat membangun aplikasi.

Memahami Konsep Dasar reduce() dengan Analogi Sederhana

Sebelum masuk ke baris kode, mari kita gunakan analogi di dunia nyata. Bayangkan kamu sedang berdiri di depan kasir sebuah supermarket dengan keranjang belanjaan yang penuh. Kasir akan mengambil barang pertamamu, melihat harganya, lalu mencatatnya. Kemudian, kasir mengambil barang kedua, menambahkan harganya ke jumlah yang pertama, dan begitu seterusnya sampai semua barang di keranjang habis.

Di akhir proses, kasir tidak lagi memberikanmu tumpukan barang, melainkan satu nilai tunggal: total uang yang harus kamu bayar. Proses inilah yang disebut dengan agregasi, dan cara kerja kasir tersebut persis seperti bagaimana reduce() beroperasi di JavaScript.

Secara harfiah, reduce berarti mengurangi atau mereduksi. Dalam pemrograman, metode ini digunakan untuk mengeksekusi fungsi callback pada setiap elemen dari array (dari kiri ke kanan) untuk menghasilkan satu nilai output tunggal.

Sintaks Dasar yang Wajib Kamu Ketahui

Agar tidak bingung saat melihat kode, berikut adalah struktur anatomi dari fungsi reduce():

let hasil = array.reduce(function(accumulator, currentValue, currentIndex, array) {
  // Logika manipulasi data kamu di sini
  return accumulator;
}, initialValue);

Mari kita breakdown satu per satu parameter di atas agar kamu paham fungsinya:

• accumulator: Wadah penampung hasil sementara. Setiap kali fungsi berjalan, nilai yang dikembalikan (returned) dari iterasi sebelumnya akan disimpan di sini.
• currentValue: Elemen array yang sedang diproses pada iterasi saat ini.
• currentIndex (Opsional): Indeks dari elemen yang sedang diproses.
• array (Opsional): Objek array asli yang sedang dipanggil fungsi reduce() ini.
• initialValue (Sangat Direkomendasikan): Nilai awal yang diberikan kepada accumulator saat fungsi dijalankan untuk pertama kalinya. Jika kamu tidak mengisinya, reduce() akan otomatis mengambil elemen pertama dari array sebagai nilai awal, dan iterasi dimulai langsung dari elemen kedua.

Mengapa initialValue Sangat Penting?

Banyak developer pemula melewatkan parameter initialValue karena menganggapnya opsional. Padahal, tidak menentukan nilai awal bisa menjadi bom waktu yang menyebabkan bug serius, terutama saat kamu bekerja dengan array yang berisi objek atau ketika array tersebut kosong.

Mari kita lihat perbedaannya melalui contoh sederhana penambahan angka berikut:

// Tanpa initialValue
const angka = [10, 20, 30];
const totalTanpaAwal = angka.reduce((acc, curr) => acc + curr);
console.log(totalTanpaAwal); // Hasilnya: 60

// Dengan initialValue
const totalDenganAwal = angka.reduce((acc, curr) => acc + curr, 0);
console.log(totalDenganAwal); // Hasilnya: 60

Secara hasil, keduanya terlihat sama persis. Namun, apa yang terjadi jika array angka di atas kosong? Jika kamu tidak memberikan initialValue pada array kosong, JavaScript akan melempar error berupa TypeError: Reduce of empty array with no initial value. Sebaliknya, jika kamu memberikan initialValue sebesar 0, fungsi akan berjalan dengan aman dan mengembalikan nilai 0.

Selain itu, jika kamu ingin mengagregasi data menjadi sebuah objek atau array baru, kamu wajib menyertakan objek kosong {} atau array kosong [] sebagai nilai awal tersebut.

Tutorial Praktis Kasus-Kasus Agregasi Data

Teori saja tentu tidak cukup. Mari kita pelajari bagaimana menerapkan reduce() untuk menyelesaikan masalah pengelolaan data yang sering muncul saat kamu membuat aplikasi atau website e-commerce.

1. Menghitung Total Nilai Belanjaan (Summing Up)

Ini adalah kasus paling klasik. Misalkan kamu memiliki data keranjang belanja berupa array berisi objek produk, dan kamu ingin menghitung total biaya yang harus dibayar oleh pelanggan.

const keranjangBelanja = [
  { produk: "Kaos Polos", harga: 150000, jumlah: 2 },
  { produk: "Celana Chino", harga: 300000, jumlah: 1 },
  { produk: "Kaos Kaki", harga: 25000, jumlah: 3 }
];

const totalBayar = keranjangBelanja.reduce((accumulator, item SaatIni) => {
  return accumulator + (itemSaatIni.harga * itemSaatIni.jumlah);
}, 0);

console.log(totalBayar); // Output: 675000

Cara kerjanya: Kami menetapkan nilai awal 0. Pada iterasi pertama, accumulator bernilai 0, lalu ditambah dengan hasil kali harga Kaos Polos dan jumlahnya (150.000 * 2 = 300.000). Nilai 300.000 ini sekarang menjadi accumulator baru untuk iterasi berikutnya, begitu seterusnya hingga semua item selesai dihitung.

2. Mengelompokkan Data Berdasarkan Kategori (Grouping)

Bayangkan kamu menerima data acak dari server tentang sekumpulan karyawan, dan kamu diminta untuk mengelompokkan mereka berdasarkan departemen tempat mereka bekerja.

const dataKaryawan = [
  { nama: "Budi", departemen: "IT" },
  { nama: "Siti", departemen: "HRD" },
  { nama: "Andi", departemen: "IT" },
  { nama: "Rian", departemen: "Marketing" },
  { nama: "Dewi", departemen: "HRD" }
];

const kelompokDepartemen = dataKaryawan.reduce((grup, karyawan) => {
  const dept = karyawan.departemen;
  
  // Jika departemen belum ada di objek grup, buat array kosong baru
  if (!grup[dept]) {
    grup[dept] = [];
  }
  
  // Masukkan nama karyawan ke dalam departemen yang sesuai
  grup[dept].push(karyawan.nama);
  
  return grup;
}, {});

console.log(kelompokDepartemen);

Output dari kode di atas akan berbentuk objek yang sangat rapi seperti ini:

{
  IT: ["Budi", "Andi"],
  HRD: ["Siti", "Dewi"],
  Marketing: ["Rian"]
}

Perhatikan bahwa di sini kita menggunakan objek kosong {} sebagai nilai awal karena kita ingin hasil akhirnya berupa pengelompokan dalam bentuk objek.

3. Menghitung Jumlah Kemunculan Elemen (Counting Instances)

Kamu juga bisa menggunakan reduce() untuk menghitung berapa kali sebuah elemen muncul di dalam suatu daftar. Misalnya, untuk menghitung jumlah suara dalam sebuah pemungutan suara pemilihan ketua komunitas.

const daftarSuara = ["Budi", "Siti", "Budi", "Andi", "Siti", "Budi"];

const hasilSuara = daftarSuara.reduce((totalSuara, nama) => {
  if (totalSuara[nama]) {
    totalSuara[nama] += 1;
  } else {
    totalSuara[nama] = 1;
  }
  return totalSuara;
}, {});

console.log(hasilSuara); 
// Output: { Budi: 3, Siti: 2, Andi: 1 }

4. Meratakan Array Multidimensi (Flattening)

Terkadang, kamu mendapatkan struktur data berupa array di dalam array yang bertingkat, dan kamu perlu menggabungkannya menjadi satu array tunggal yang datar.

const arrayBetingkat = [[1, 2], [3, 4], [5, 6]];

const arrayDatar = arrayBetingkat.reduce((acc, curr) => {
  return acc.concat(curr);
}, []);

console.log(arrayDatar); // Output: [1, 2, 3, 4, 5, 6]

Meskipun JavaScript modern saat ini sudah memiliki metode bawaan array.flat(), memahami teknik di atas menggunakan reduce() memberikan pemahaman mendalam tentang fleksibilitas manipulasi struktur data.

Perbandingan: Kapan Harus Pakai reduce(), map(), atau filter()?

Agar kamu tidak salah pilih alat saat menulis kode, mari kita petakan fungsi masing-masing metode array populer ini:

Gunakan aturan praktis ini: Jika kamu ingin mengubah bentuk tiap item, gunakan map(). Jika kamu ingin membuang beberapa item, gunakan filter(). Jika kamu ingin mengumpulkan atau menyatukan seluruh item menjadi satu kesimpulan data, gunakan reduce().

Tips Optimasi Kode Menggunakan reduce()

Meskipun sangat kuat, penggunaan reduce() yang kurang bijak bisa membuat kode sulit dibaca oleh rekan tim kamu. Berikut beberapa tips praktis agar kodemu tetap bersih:

• Gunakan Arrow Function untuk Kasus Sederhana: Jika operasinya pendek, perpendek penulisan baris kodemu agar terlihat lebih ringkas dan modern.
• Berikan Penamaan Variabel yang Jelas: Jangan ragu mengubah nama parameter default seperti acc dan curr menjadi nama yang deskriptif, misalnya totalHarga dan produkSaatIni. Ini akan sangat membantu saat kamu membaca ulang kodemu sebulan kemudian.
• Jangan Lakukan Terlalu Banyak Hal: Jika logika di dalam reduce() kamu sudah terlalu panjang dan bercabang, pertimbangkan untuk memisahkan fungsinya atau mengombinasikannya dengan metode lain seperti filter() terlebih dahulu agar alur logika tetap fokus dan linear.

Kesimpulan

Metode reduce() di JavaScript bukan lagi hal yang menakutkan jika kamu sudah memahami esensi dari keberadaan accumulator dan pentingnya menentukan initialValue yang tepat sesuai kebutuhan output data kamu. Mulai dari operasi matematika sederhana, pengelompokan data kategori, hingga transformasi struktur objek yang kompleks, semuanya bisa diselesaikan secara elegan dengan satu metode tangguh ini.

Cobalah untuk membuka kembali proyek kode yang pernah kamu buat sebelumnya, lalu periksa apakah ada perulangan manual (seperti menggunakan for atau forEach) yang bisa kamu ganti dan sederhanakan dengan menggunakan fungsi reduce(). Selamat mencoba dan selamat menulis kode yang lebih bersih!

1. MDN Web Docs. Array.prototype.reduce(). Diakses pada 2 Juni 2026, dari https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce
2. W3Schools. JavaScript Array reduce() Method. Diakses pada 2 Juni 2026, dari https://www.w3schools.com/jsref/jsref_reduce.asp
3. JavaScript.info. Array methods - reduce/reduceRight. Diakses pada 2 Juni 2026, dari https://javascript.info/array-methods#reduce-reduceright