5 Contoh Reduce dalam JavaScript untuk Mempermudah Codingmu
Reduce adalah metode array yang sangat kuat dalam JavaScript. Dengan reduce, kamu bisa memproses seluruh elemen array dan mengubahnya menjadi sebuah nilai tunggal.
Bayangkan kamu punya daftar belanja, dan kamu ingin menghitung total harga. Reduce bisa membantu kamu dengan mudah!
Yuk, kita lihat beberapa contohnya:
1. Mencari Total Harga
Misalnya, kamu punya array berisi harga barang belanjaan:
const hargaBarang = [10000, 25000, 15000, 5000];
Dengan reduce, kamu bisa menghitung totalnya:
const totalHarga = hargaBarang.reduce((total, harga) => total + harga, 0);
console.log(totalHarga); // Output: 55000
Penjelasan:
reduce
menerima dua parameter: sebuah fungsi callback dan nilai awal.- Fungsi callback menerima dua parameter:
total
(akumulator) danharga
(elemen array). total + harga
adalah operasi yang dilakukan pada setiap iterasi.0
adalah nilai awal (accumulator).
2. Menemukan Nilai Maksimum
Misalnya kamu ingin mencari nilai terbesar dalam array:
const angka = [10, 5, 20, 15];
const nilaiMax = angka.reduce((max, angka) => (max > angka ? max : angka), 0);
console.log(nilaiMax); // Output: 20
Penjelasan:
max > angka ? max : angka
adalah operator ternary.- Jika
max
lebih besar dariangka
, makamax
disimpan. - Jika tidak,
angka
disimpan.
3. Menghitung Frekuensi Karakter
Misalnya, kamu ingin menghitung frekuensi kemunculan karakter dalam sebuah string:
const kalimat = "hello world";
const frekuensiKarakter = kalimat.split("").reduce((obj, char) => {
obj[char] = (obj[char] || 0) + 1;
return obj;
}, {});
console.log(frekuensiKarakter);
// Output: { h: 1, e: 1, l: 3, o: 2, w: 1, r: 1, d: 1 }
Penjelasan:
split("")
mengubah string menjadi array karakter.- Objek
obj
digunakan untuk menyimpan frekuensi setiap karakter. obj[char] = (obj[char] || 0) + 1
menambahkan 1 ke frekuensi karakter yang ditemukan.
4. Menggabungkan Array
Misalnya, kamu ingin menggabungkan beberapa array menjadi satu array:
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const array3 = [7, 8, 9];
const gabunganArray = [array1, array2, array3].reduce(
(gabungan, array) => gabungan.concat(array),
[]
);
console.log(gabunganArray); // Output: [1, 2, 3, 4, 5, 6, 7, 8, 9]
Penjelasan:
concat
menggabungkan array.[]
adalah array kosong sebagai nilai awal.
5. Mengelompokkan Data
Misalnya, kamu ingin mengelompokkan data berdasarkan kategori:
const data = [
{ name: "Budi", category: "A" },
{ name: "Joko", category: "B" },
{ name: "Siti", category: "A" },
{ name: "Tono", category: "B" },
];
const dataKelompok = data.reduce((kelompok, item) => {
const kategori = item.category;
if (!kelompok[kategori]) {
kelompok[kategori] = [];
}
kelompok[kategori].push(item);
return kelompok;
}, {});
console.log(dataKelompok);
// Output: { A: [{ name: "Budi", category: "A" }, { name: "Siti", category: "A" }], B: [{ name: "Joko", category: "B" }, { name: "Tono", category: "B" }] }
Penjelasan:
- Objek
kelompok
digunakan untuk menyimpan data yang dikelompokkan berdasarkan kategori. if (!kelompok[kategori]) { kelompok[kategori] = []; }
menambahkan kategori baru ke objek jika belum ada.
Dengan contoh-contoh di atas, kamu bisa melihat bagaimana reduce bisa sangat berguna dalam memproses array dan melakukan berbagai operasi dengan lebih mudah.
Semoga bermanfaat!