5 Contoh Penggunaan Reduce dalam JavaScript
Reduce adalah salah satu metode yang powerful dalam JavaScript, memungkinkan kamu untuk "mengurangi" array menjadi satu nilai tunggal. Fleksibilitasnya memungkinkan kamu untuk melakukan berbagai operasi pada data, seperti menghitung jumlah total, mencari nilai maksimum, atau bahkan menggabungkan objek.
Yuk, kita telusuri 5 contoh penggunaan Reduce yang umum:
1. Menghitung Jumlah Total
const numbers = [1, 2, 3, 4, 5];
const total = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(total); // Output: 15
Dalam contoh ini, reduce menjumlahkan semua elemen dalam array numbers.
Penjelasan:
- accumulator: Menyimpan hasil penjumlahan sementara. Awalnya bernilai 0.
- currentValue: Mewakili elemen array yang sedang diproses.
- 0: Nilai awal accumulator.
2. Mencari Nilai Maksimum
const numbers = [10, 5, 20, 8, 15];
const max = numbers.reduce((accumulator, currentValue) => (currentValue > accumulator ? currentValue : accumulator), 0);
console.log(max); // Output: 20
reduce membandingkan setiap elemen dengan accumulator. Jika elemen lebih besar, accumulator diganti dengan elemen tersebut.
Penjelasan:
- accumulator: Menyimpan nilai maksimum sementara.
- currentValue: Mewakili elemen array yang sedang diproses.
- 0: Nilai awal accumulator.
3. Menghitung Frekuensi Kemunculan Karakter
const text = 'hello world';
const charCount = text.split('').reduce((accumulator, currentValue) => {
accumulator[currentValue] = (accumulator[currentValue] || 0) + 1;
return accumulator;
}, {});
console.log(charCount); // Output: {h: 1, e: 1, l: 3, o: 2, : 1, w: 1, r: 1, d: 1}
reduce menghitung frekuensi kemunculan setiap karakter dalam teks.
Penjelasan:
- accumulator: Menyimpan objek yang berisi frekuensi karakter.
- currentValue: Mewakili karakter yang sedang diproses.
- {}: Objek kosong sebagai nilai awal accumulator.
4. Menggabungkan Objek
const users = [
{ name: 'John', age: 30 },
{ name: 'Jane', age: 25 },
{ name: 'Peter', age: 35 },
];
const combinedUsers = users.reduce((accumulator, currentValue) => {
accumulator[currentValue.name] = currentValue;
return accumulator;
}, {});
console.log(combinedUsers); // Output: {John: {name: 'John', age: 30}, Jane: {name: 'Jane', age: 25}, Peter: {name: 'Peter', age: 35}}
reduce menggabungkan objek dalam array users menjadi satu objek baru.
Penjelasan:
- accumulator: Menyimpan objek yang berisi semua pengguna.
- currentValue: Mewakili objek pengguna yang sedang diproses.
- {}: Objek kosong sebagai nilai awal accumulator.
5. Meratakan Array Bersarang
const nestedArray = [1, [2, 3], [4, [5, 6]]];
const flattenedArray = nestedArray.reduce((accumulator, currentValue) => {
return accumulator.concat(Array.isArray(currentValue) ? flattenedArray(currentValue) : currentValue);
}, []);
console.log(flattenedArray); // Output: [1, 2, 3, 4, 5, 6]
reduce meratakan array bersarang menjadi satu array.
Penjelasan:
- accumulator: Menyimpan array yang telah diratakan.
- currentValue: Mewakili elemen array yang sedang diproses.
- []: Array kosong sebagai nilai awal accumulator.
Kesimpulan
reduce adalah metode yang sangat fleksibel dan powerful dalam JavaScript. Dengan memahami bagaimana cara kerjanya, kamu dapat memanfaatkannya untuk berbagai keperluan, mulai dari menghitung jumlah total hingga menggabungkan objek.