JavaScriptのreduceRightの使い方！【配列】

JavaScriptで配列の要素を右から左へ処理し、単一の値にまとめるreduceRightメソッドについて書いています。

reduceRightメソッドは、配列の要素を順番に処理しながら、累積値を更新していく場合に便利です。
reduceメソッドと似ていますが、処理の方向が逆である点が異なります。

実際に動くサンプルを使って、以下の操作を解説します。

reduceメソッドについては、下記に記載しています。

JavaScriptのreduceメソッドの使い方！【配列】

JavaScriptのreduceメソッドの使い方について書いています。reduceメソッドは配列から呼び出して、配列要素の値の合計値などを算出するときなどに役立ちます。JavaScriptのreduceメソッドとは？reduceメソッドは...

codelikes.com

2025.02.12

reduceRightメソッドの基本的な使い方

reduceRightメソッドは、配列の要素を右から左へ処理し、単一の値を返します。
基本的な構文は以下のとおりです。

array.reduceRight(callback(accumulator, currentValue[, index[, array]])[, initialValue])

• callback: 各要素に対して実行する関数。
  • accumulator: 累積値。
  • currentValue: 現在処理されている要素。
  • index: 現在処理されている要素のインデックス（省略可能）。
  • array: reduceRightが呼び出された配列（省略可能）。
• initialValue: 累積値の初期値（省略可能）。

配列要素を右から順に処理して値をまとめる

reduceRightメソッドを使って合計値を求めてみます。

アロー関数を使わずにわかりやすく

アロー関数を使わずに、合計値を求めてみます。

const numbers = [1, 2, 3, 4];
const sum = numbers.reduceRight(function (total, value) {
  return total + value;
});

console.log(sum); // 結果：10

numbers配列を作成して、次の行でreduceRightメソッドを呼んでいます。
累積値を入れるためのtotal変数と、配列の要素であるvalue変数を渡しています。

配列の要素の分処理されて、要素を右から順に足し合わせています。
結果「10」になります。

console.logで要素の内容を出力すると、わかりやすいです。(初期値の0も付けました)

const numbers = [1, 2, 3, 4];
const sum = numbers.reduceRight(function (total, value) {
  console.log(`合計値:${total} 現在値:${value}`);
  return total + value;
}, 0);

console.log(sum);

console.logでtotal変数とvalue変数の値を出力しました。
結果、下記のように配列の右側から処理されて、足し込まれているのが確認できます。

合計値:0 現在値:4
合計値:4 現在値:3
合計値:7 現在値:2
合計値:9 現在値:1
10

アロー関数を使って短く

アロー関数を使って、簡潔に書きました。

const numbers = [1, 2, 3, 4];
const sum = numbers.reduceRight((total, value) => total + value);

console.log(sum); // 結果：10

初期値を渡していないので、reduceRightメソッドは、最初に「4」と「3」を足して
その結果と「2」を足し、最後に「1」を足して「10」を返します。

累積値の初期値を指定する

reduceRightメソッドで初期値を指定した例です。
第2引数initialValueは、累積値の初期値を指定します。

const numbers = [1, 2, 3, 4];
const sumWithInitialValue = numbers.reduceRight((total, value) => total + value, 10);

console.log(sumWithInitialValue); // 結果：20

累積値の初期値として「10」を指定しています。
reduceRightメソッドは、最初に「10」と「4」を足し、その結果の「14」と「3」を足して…
といった感じで処理をして「20」を返します。

reduceとreduceRightの違い

reduceとreduceRightは、どちらも配列の要素を単一の値にまとめるメソッドですが、処理の方向が異なります。

• reduce: 配列の左から右へ要素を処理します。
• reduceRight: 配列の右から左へ要素を処理します。

const numbers = [1, 2, 3, 4];

const sumLeft = numbers.reduce((total, value) => total + value);
const sumRight = numbers.reduceRight((total, value) => total + value);

console.log(sumLeft); // 結果：10
console.log(sumRight); // 結果：10

上記の例では、どちらのメソッドを使っても結果は同じですが、処理の順序が異なります。
要素の順序が結果に影響を与える処理を行う場合には、どちらのメソッドを使うか注意する必要があります。

わかりやすくconsole.logで変数の中身を出力すると、下記のようになります。

const numbers = [1, 2, 3, 4];

console.log("---reduceで処理---");
const sumLeft = numbers.reduce(function (total, value) {
  console.log(`合計値:${total} 現在値:${value}`);
  return total + value;
}, 0);

console.log("---reduceRightで処理---");
const sumRight = numbers.reduceRight(function (total, value) {
  console.log(`合計値:${total} 現在値:${value}`);
  return total + value;
}, 0);

reduceメソッドでは配列の左から処理して、reduceRightメソッドでは右から処理されていることが確認できました。

---reduceで処理---
合計値:0 現在値:1
合計値:1 現在値:2
合計値:3 現在値:3
合計値:6 現在値:4
---reduceRightで処理---
合計値:0 現在値:4
合計値:4 現在値:3
合計値:7 現在値:2
合計値:9 現在値:1

JavaScriptのreduceRightメソッドの使い方まとめ

今回はJavaScriptのreduceRightメソッドの使い方について解説しました。
記事の内容をまとめます。