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 行のコードに簡略化できますが、初心者には少し抽象的に感じられるかもしれません。