Array.prototype.reduceRight()

試してみましょう

const array = [
  [0, 1],
  [2, 3],
  [4, 5],
];

const result = array.reduceRight((accumulator, currentValue) =>
  accumulator.concat(currentValue),
);

console.log(result);
// 予想される結果: Array [4, 5, 2, 3, 0, 1]

構文

reduceRight(callbackFn)
reduceRight(callbackFn, initialValue)

引数

callbackFn

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

accumulator

前回の callbackFn の呼び出し結果の値です。初回の呼び出しでは initialValue が指定されていた場合はその値、そうでない場合はこの配列の末尾の要素の値です。

currentValue

現在の要素の値です。初回の呼び出しでは initialValue が指定された場合は末尾の要素の値であり、そうでない場合は末尾から 2 番目の要素の値です。

currentIndex

currentValue のインデックス位置です。初回の呼び出しでは、 initialValue が指定された場合は array.length - 1、そうでない場合は array.length - 2 です。

reduceRight() が呼び出された配列です。

initialValue 省略可

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

返値

畳み込みによって得られた値です。

解説

reduceRight() メソッドは反復処理メソッドです。「縮小」コールバック関数を配列に含まれる各要素に対して昇順に一度ずつ呼び出し、その結果を単一の値に積算します。これらのメソッドが一般的にどのように動作するのかについての詳細は、反復処理メソッドの節をご覧下さい。

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

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

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

reduce() を使用すべきでない場合で説明されている reduce に関するすべての注意点は、reduceRight にも当てはまります。JavaScript には遅延評価の意味づけがないため、reduce と reduceRight の間にパフォーマンスの違いはありません。

例

初期値がない場合の 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 回呼び出され、ぞれぞれの呼び出しの引数と返値は次のようになります。

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

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

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

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

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 mul3 = (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, mul3, sub2, split, add, div4);
computation(console.log, 5); // 14 をログ出力

// 次のものと同じ

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) => mul3(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

仕様書

ブラウザーの互換性

関連情報

• Array.prototype.reduceRight のポリフィル (core-js)
• es-shims による Array.prototype.reduceRight のポリフィル
• インデックス付きコレクションのガイド
• Array
• Array.prototype.map()
• Array.prototype.flat()
• Array.prototype.flatMap()
• Array.prototype.reduce()
• TypedArray.prototype.reduceRight()
• Object.groupBy()
• Map.groupBy()