Array.prototype.reduceRight()

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

試してみましょう

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

構文

js

// アロー関数
reduceRight((accumulator, currentValue) => {
  /* … */
});
reduceRight((accumulator, currentValue, index) => {
  /* … */
});
reduceRight((accumulator, currentValue, index, array) => {
  /* … */
});
reduceRight((accumulator, currentValue, index, array) => {
  /* … */
}, initialValue);

// コールバック関数
reduceRight(callbackFn);
reduceRight(callbackFn, initialValue);

// コールバック畳み込み関数
reduceRight(function (accumulator, currentValue) {
  /* … */
});
reduceRight(function (accumulator, currentValue, index) {
  /* … */
});
reduceRight(function (accumulator, currentValue, index, array) {
  /* … */
});
reduceRight(function (accumulator, currentValue, index, array) {
  /* … */
}, initialValue);

引数

callbackFn

配列内のそれぞれの値に対して実行される関数です。

この関数は、以下の引数と共に呼び出されます。

accumulator

コールバック関数の前回の呼び出しで返された値、もしくは、指定されていれば initialValue です。（下記参照）

currentValue

配列内で現在処理中の要素です。

index

配列内で現在処理中の要素の位置です。

array

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

initialValue 省略可

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

返値

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

解説

reduceRight は、配列内に存在するそれぞれの要素に対してコールバック関数を一度ずつ実行します。配列内の穴は対象外です。初期値 (あるいは直前のコールバックの呼び出し結果)、現在の要素の値、現在の位置、繰り返しが行われる配列の 4 つの引数を受け取ります。

reduceRight の callbackFn の呼び出しは、以下のように見えるでしょう。

js

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

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

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

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

js

[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) になります。

initialValue を渡した場合、結果は次のようになります。

js

[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 です。

例

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

js

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

配列中の配列を平坦化する

js

const arrays = [
  [0, 1],
  [2, 3],
  [4, 5],
];
const flattened = arrays.reduceRight((a, b) => a.concat(b), []);
// flattened is [4, 5, 2, 3, 0, 1]

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

js

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 の違い

js

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 も参照してください。

js

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

仕様書

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

ブラウザーの互換性

BCD tables only load in the browser

関連情報