JavaScript における reduce 関数の使い方

reduce() は JavaScript における配列の高階関数で、配列内のすべての要素をある方法で集約して単一の値にするために使用されます。その基本的な使い方は、コールバック関数を提供することで、コールバック関数は 4 つの引数を受け取ります：accumulator（累積器）、currentValue（現在の値）、currentIndex（現在のインデックス）、array（元の配列）。ここで、accumulator は各イテレーションの結果を保存するために使用され、currentValue は現在のイテレーション項目の値です。

構文：#

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

callback: 実行されるコールバック関数で、4 つの引数を受け取ります：
- accumulator: 前回のコールバック関数が返した値、または初期値（initialValue）。
- currentValue: 現在処理中の配列要素。
- index: 現在の要素のインデックス（0 から始まる）。
- array: 操作される元の配列。
initialValue（オプション）：コールバック関数が初めて呼び出されるときの accumulator の初期値を指定します。initialValue が提供されない場合、デフォルトで accumulator の初期値は配列の最初の要素となり、currentValue は配列の 2 番目の要素から始まります。

例 1：配列要素の合計を求める#

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

const sum = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0);  // 0 は初期値

console.log(sum);  // 15

例 2：配列の重複を排除する#

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

const uniqueNumbers = numbers.reduce((accumulator, currentValue) => {
  if (!accumulator.includes(currentValue)) {
    accumulator.push(currentValue);
  }
  return accumulator;
}, []);

console.log(uniqueNumbers);  // [1, 2, 3, 4]

例 3：配列内の各要素の出現回数を計算する#

const fruits = ['apple', 'banana', 'apple', 'orange', 'banana', 'banana'];

const fruitCount = fruits.reduce((accumulator, currentValue) => {
  if (accumulator[currentValue]) {
    accumulator[currentValue] += 1;
  } else {
    accumulator[currentValue] = 1;
  }
  return accumulator;
}, {});

console.log(fruitCount);  // { apple: 2, banana: 3, orange: 1 }

例 4：チェーン操作#

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

const result = numbers
  .reduce((acc, currentValue) => acc + currentValue, 0)
  .toString()
  .split('')
  .reverse()
  .join('');

console.log(result);  // "10" (数字 10 が反転して "01" になる)

まとめ#

reduce() は非常に強力なメソッドで、配列の集約、変換、カウントなど、さまざまなシーンに適しています。複雑な操作を 1 行のコードに簡素化できますが、初心者には少し抽象的に感じられるかもしれません。