Array ReduceRight JavaScript: Sintaks dan Contoh Penggunaan

reduceRight() merupakan method array di JavaScript yang mengeksekusi fungsi callback pada setiap elemen array dari kanan ke kiri (elemen array terakhir ke awal).

Nilai hasil kalkulasi pada elemen sebelumnya digunkaan untuk melakukan kalkulasi pada elemen berikutnya.

Setelah fungsi callback dijalankan untuk masing-masing elemen array, method ini mengembalikan nilai tunggal.

Saya sarankan untuk mempelajari reduce() terlebih dahulu karena di sana saya membahasnya secara detail.

Perbedaannya hanya pada urutan eksekusi elemen, reduce() dari kiri ke kanan, sedangkan reduceRight() dari kanan ke kiri.

Mari kita pelajari lebih lanjut sintaks dan contoh penggunaannya.

1. Sintaks
2. Cara Kerja reduceRight()
   1. Tanpa nilaiAwal
   2. Dengan nilaiAwal
3. Contoh
   1. Menjumlahkan Nilai Objek Dalam Array
4. Perbedaan reduce() dan reduceRight()

Sintaks

// arrow function
reduceRight((nilaiSebelumnya, nilaiSaatIni, indeksSaatIni, array) => { ... }, nilaiAwal)

// callback function
reduceRight(callbackFn, nilaiAwal)

Parameter

• callbackFn: fungsi yang dieksekusi untuk setiap elemen array. Menerima empat argumen berikut:

  • nilaiSebelumnya: nilai sebelumnya yang dikembalikan fungsi callback, atau nilaiAwal jika ada.
  • nilaiSaatIni: elemen array saat ini.
  • indeksSaatIni (opsional): indeks elemen array saat ini.
  • array (opsional): array sumber.

• nilaiAwal (opsional):

  Jika ditentukan, nilai ini akan digunakan oleh nilaiSebelumnya saat pertama kali callback dipanggil, dan nilaiSaatIni akan berisi nilai elemen terakhir pada array.

  Jika tidak, nilaiSebelumnya akan menggunakakan elemen terakhir array dan nilaiSaatIni menggunakan elemen kedua dari akhir.

Nilai Kembalian

Mengembalikan nilai yang dihasilkan fungsi callback sampai akhir (paling kiri) elemen array.

Dapat mengembalikan kesalahan TypeError jika array tidak memiliki elemen dan nilaiAwal tidak ditentukan.

Cara Kerja reduceRight()

Mari kita gunakan array sederhana untuk memahami cara kerja reduceRight(), tanpa nilaiAwal dan dengan nilaiAwal.

Tanpa nilaiAwal

Misalnya, kita ingin menjumlahkan semua elemen array angka.

const arrAngka = [1, 2, 3, 4, 5];

const hasil = arrAngka.reduceRight((nilaiSebelumnya, nilaiSaatIni) => {
  return nilaiSebelumnya + nilaiSaatIni;
});

console.log(hasil); // 15

Dalam kasus seperti ini hasilnya memang tidak ada bedanya dengan reduce.

Tapi reduceRight dimulai dari elemen paling kanan hingga elemen paling kiri, coba perhatikan langkah-langkahnya.

Atau, lihat gambar berikut.

Selain urutan eksekusi elemen (kanan ke kiri), yang juga perlu diperhatikan di sini saat callback pertama kali dipanggil, nilai dari nilaiSebelumnya menggunakan elemen terakhir dari array, 5.

Sedangkan nilaiSaatIni menggunakan elemen kedua dari akhir, 4.

Untuk panggilan callback berikutnya, nilaiSebelumnya akan menggunkaan nilai hasil kalkulasi fungsi callback sebelumnya.

Singkatnya, tanpa nilaiAwal:

Panggilan callback pertama, nilaiSebelumnya menggunakan nilai elemen terakhir, sedangkan nilaiSaatIni menggunakan nilai elemen kedua dari akhir.

Dengan nilaiAwal

Mari kita gunakan array yang sama, tapi mari kita lihat bagaimna jadinya jika kita menentukan nilaiAwal.

const arrAngka = [1, 2, 3, 4, 5];

const hasil = arrAngka.reduceRight((nilaiSebelumnya, nilaiSaatIni) => {
  return nilaiSebelumnya + nilaiSaatIni;
}, 5);

console.log(hasil); // 20

Hasilnya sama saja seperti reduce biasa dengan nilaiAwal karena kita menggunakan ekspresi matematika yang sederhana.

Mari kita lihat langkah-langkahnya.

Atau, lihat gambar berikut.

Pada panggilan callback pertama, nilai dari nilaiSebelumnya sekarang tidak lagi menggunakan nilai elemen terakhir array, melainkan nilaiAwal yaitu 5.

Sedangkan nilaiSaatIni menggunakan elemen terakhir dari array.

Singkatnya, dengan nilaiAwal:

Panggilan callback pertama, nilaiSebelumnya menggunakan nilai dari nilaiAwal, sedangkan nilaiSaatIni menggunakan elemen terakhir array.

Contoh

Menjumlahkan Nilai Objek Dalam Array

Misalnya, kita memiliki objek data masing-masing mahasiswa di dalam array. Kita ingin mengetahui jumlah nilai semua mahasiswa.

const mahasiswa = [
  { nama: 'ucup', nilai: 80 },
  { nama: 'budi', nilai: 90 },
  { nama: 'bambang', nilai: 75 },
];

const totalNilai = mahasiswa.reduce((nilaiSebelumnya, nilaiSaatIni) => {
  return nilaiSebelumnya + nilaiSaatIni.nilai;
}, 0);

console.log(totalNilai); // 245

Perbedaan reduce() dan reduceRight()

Cara kerja reduce() dan reduceRight() secara umum sama saja, yang berbeda hanya urutan eksekusi elemen saja.

Perbedaannya:

• reduce() dari kiri ke kanan (elemen pertama ke elemen terakhir).
• reduceRight() dari kanan ke kiri (elemen terakhir ke elemen pertama/awal).

Agar lebih mudah dipahami, mari kita lihat perbedaannya dalam gambar berikut.

Tanpa nilaiAwal

Dengan nilaiAwal

Hasilnya sama karena kita menggunakan operasi matematika sederhana yang bersifat komutatif, yang perlu diperhatikan di sini urutannya.

Atau, lihat kode di bawah.

Tanpa nilaiAwal

const arr = ['1', '2', '3', '4', '5'];

const r = arr.reduce((prev, curr) => prev + curr);
const rr = arr.reduceRight((prev, curr) => prev + curr);

console.log(r); // "12345"
console.log(rr); // "54321"

Dengan nilaiAwal

const arr = ['1', '2', '3', '4', '5'];

const r = arr.reduce((prev, curr) => prev + curr, '5');
const rr = arr.reduceRight((prev, curr) => prev + curr, '5');

console.log(r); // "512345"
console.log(rr); // "554321"