Array.prototype.reduceRight()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

reduceRight() は Array インスタンスのメソッドで、アキュームレーターと配列のそれぞれの値に対して（右から左へ）関数を適用して、単一の値にします。

左から右へ適用する場合は Array.prototype.reduce() を参照してください。

構文

reduceRight(callbackFn)
reduceRight(callbackFn, initialValue)

引数

callbackFn

配列の各要素に対して実行される関数です。その返値は、次に callbackFn を呼び出す際の accumulator 引数の値になります。最後の呼び出しでは、返値は reduceRight() の返値となります。この関数は以下の引数で呼び出されます。

accumulator: 前回の callbackFn の呼び出し結果の値です。初回の呼び出しでは initialValue が指定されていた場合はその値、そうでない場合はこの配列の末尾の要素の値です。
currentValue: 現在の要素の値です。初回の呼び出しでは initialValue が指定された場合は末尾の要素の値であり、そうでない場合は末尾から 2 番目の要素の値です。
currentIndex: reduceRight() が呼び出された配列です。; currentValue のインデックス位置です。初回の呼び出しでは、 initialValue が指定された場合は array.length - 1、そうでない場合は array.length - 2 です。

initialValue 省略可

callbackFn の最初の呼び出しのときに、アキュームレーターとして使用する値です。初期値がが渡されなかった場合は、配列の最後の要素が適用され、その要素が飛ばされます。また、 reduceRight() を空の配列に対して初期値なしで呼び出すと TypeError になります。

解説

reduceRight() メソッドは反復処理メソッドです。「縮小」コールバック関数を配列に含まれる各要素に対して昇順に一度ずつ呼び出し、その結果を単一の値に積算します。

callbackFn は値が割り当てられている配列インデックスに対してのみ呼び出されます。疎配列の空のスロットに対しては呼び出されません。

他の反復処理メソッドとは異なり、 reduceRight() は thisArg 引数を受け入れません。 callbackFn は常に undefined を this として呼び出され、 callbackFn が厳格モードでない場合は globalThis に置き換えられます。

reduceRight() メソッドは呼び出し元の配列を変更しませんが、 callbackFn に指定された関数は変更することがあります。ただし、配列の長さは callbackFn を最初に呼び出す前に保存されることに注意してください。したがって、

callbackFn は reduceRight() の呼び出しを始めたときの配列の長さを超えて追加された要素にはアクセスしません。
既に処理したインデックスを変更しても、 callbackFn が再度呼び出されることはありません。
まだ処理していない既存の配列要素が callbackFn によって変更された場合、 callbackFn に渡される値はその要素が取得される時点の値になります。削除された要素は undefined であるかのように処理されます。

警告: 前項で説明したような、参照中の配列の同時進行での変更は（特殊な場合を除いて）普通は避けるべきです。多くの場合、理解しにくいコードになります。

reduceRight() メソッドは汎用的です。これは this 値に length プロパティと整数キーのプロパティがあることだけを期待します。

例

初期値がない場合の reduceRight() の動作

reduceRight の callbackFn の呼び出しは次のようになります：

arr.reduceRight((accumulator, currentValue, index, array) => {
  // …
});

関数が初めて呼び出されたとき、accumulator と currentValue は、2 つの値のいずれかになります。 initialValue を指定して reduceRight を呼び出した場合、accumulator は initialValue と等しくなり、currentValue は配列の最後の値と等しくなります。initialValue が指定されなかった場合、accumulator は配列の最後の値に等しく、currentValue は最後から 2 番目の値に等しくなります。

配列が空で、initialValue が指定されなかった場合は、TypeError が発生します。配列に (位置に関わらず) 要素が 1 つしかなく、initialValue が指定されなかった場合、または initialValue が指定されたが配列が空だった場合は、callbackFn を呼び出されずに単独の値が返されます。

この関数を使用した場合について見てみましょう。

[0, 1, 2, 3, 4].reduceRight(
  (accumulator, currentValue, index, array) => accumulator + currentValue,
);

コールバックは 4 回呼び出され、ぞれぞれの呼び出しの引数と返値は次のようになります。

	`accumulator`	`currentValue`	`index`	Return value
First call	`4`	`3`	`3`	`7`
Second call	`7`	`2`	`2`	`9`
Third call	`9`	`1`	`1`	`10`
Fourth call	`10`	`0`	`0`	`10`

reduceRight の返値は、コールバック呼び出しの最後の返値である (10) になります。

初期値がある場合の reduceRight() の動作

ここでは、同じアルゴリズムを使用して同じ配列を縮小しますが、 reduceRight() の 2 つ目の引数である initialValue として 10 を使用します。

[0, 1, 2, 3, 4].reduceRight(
  (accumulator, currentValue, index, array) => accumulator + currentValue,
  10,
);

	`accumulator`	`currentValue`	`index`	Return value
First call	`10`	`4`	`4`	`14`
Second call	`14`	`3`	`3`	`17`
Third call	`17`	`2`	`2`	`19`
Fourth call	`19`	`1`	`1`	`20`
Fifth call	`20`	`0`	`0`	`20`

reduceRight から返される値はこのときのもので、もちろん 20 です。

配列内のすべての値を合計する

const sum = [0, 1, 2, 3].reduceRight((a, b) => a + b);
// sum is 6

一連のコールバックを使用して非同期関数のリストを実行し、それぞれの結果を次のコールバックに渡す

const waterfall =
  (...functions) =>
  (callback, ...args) =>
    functions.reduceRight(
      (composition, fn) =>
        (...results) =>
          fn(composition, ...results),
      callback,
    )(...args);

const randInt = (max) => Math.floor(Math.random() * max);

const add5 = (callback, x) => {
  setTimeout(callback, randInt(1000), x + 5);
};
const mult3 = (callback, x) => {
  setTimeout(callback, randInt(1000), x * 3);
};
const sub2 = (callback, x) => {
  setTimeout(callback, randInt(1000), x - 2);
};
const split = (callback, x) => {
  setTimeout(callback, randInt(1000), x, x);
};
const add = (callback, x, y) => {
  setTimeout(callback, randInt(1000), x + y);
};
const div4 = (callback, x) => {
  setTimeout(callback, randInt(1000), x / 4);
};

const computation = waterfall(add5, mult3, sub2, split, add, div4);
computation(console.log, 5); // -> 14

// same as:

const computation2 = (input, callback) => {
  const f6 = (x) => div4(callback, x);
  const f5 = (x, y) => add(f6, x, y);
  const f4 = (x) => split(f5, x);
  const f3 = (x) => sub2(f4, x);
  const f2 = (x) => mult3(f3, x);
  add5(f2, input);
};

reduce と reduceRight の違い

const a = ["1", "2", "3", "4", "5"];
const left = a.reduce((prev, cur) => prev + cur);
const right = a.reduceRight((prev, cur) => prev + cur);

console.log(left); // "12345"
console.log(right); // "54321"

合成可能な関数の定義

関数合成とは、各関数の出力を次の関数に渡し、最後の関数の出力を最終的な結果とする、関数を組み合わせるための仕組みです。この例では reduceRight() を使って、関数合成を実現しています。

Wikipedia の Function composition も参照してください。

const compose =
  (...args) =>
  (value) =>
    args.reduceRight((acc, fn) => fn(acc), value);

// 渡された数値をインクリメントする
const inc = (n) => n + 1;

// 渡された数値を 2 倍にする
const double = (n) => n * 2;

// 合成関数を使用する
console.log(compose(double, inc)(2)); // 6

// 合成関数を使用する
console.log(compose(inc, double)(2)); // 5

reduceRight() を疎配列で使用

reduceRight() は疎配列の欠落している要素をスキップしますが、値が undefined の場合はスキップしません。

console.log([1, 2, , 4].reduceRight((a, b) => a + b)); // 7
console.log([1, 2, undefined, 4].reduceRight((a, b) => a + b)); // NaN

配列以外のオブジェクトに対する reduceRight() の呼び出し

reduceRight() メソッドは this の length プロパティを読み込み、次にキーが length より小さい非負の整数である各プロパティにアクセスします。

const arrayLike = {
  length: 3,
  0: 2,
  1: 3,
  2: 4,
  3: 99, // length が 3 であるため reduceRight() からは無視される
};
console.log(Array.prototype.reduceRight.call(arrayLike, (x, y) => x - y));
// -1 すなわち 4 - 3 - 2

仕様書

Specification
ECMAScript Language Specification # sec-array.prototype.reduceright

ブラウザーの互換性

BCD tables only load in the browser