Javascriptのreduce()とは？メソッドや使い方をわかりやすくご紹介

JavaScriptプログラミングで、配列操作は重要な要素です。配列操作のなかでも、reduce()メソッドは特に強力な機能を持っています。配列の要素を集約するreduce()は、複雑なデータ処理や累積計算を効率的にコーディングできます。

本記事では、reduce()の基本的な使い方から、他のメソッドとの違い、注意点まで詳しく解説します。JavaScriptの力を引き出すためにも、ぜひreduce()をマスターしましょう。

JavaScriptのreduce()とは

JavaScriptのreduce()メソッドは、配列の要素を処理して単一の値を返す関数です。

配列の要素に順に関数を適用し、結果を累積していくシンプルな機能ですが、複雑なデータ処理もできる汎用性があります。

const numbers = [5, 2, 8, 9, 3];

const max = numbers.reduce(Math.max); // 配列の最大値を見つける

console.log(max); // 9

map()との違い

reduce()とmap()は、どちらも配列を操作するメソッドで、関数を引数にしますが、目的や出力は異なります。

map()は各要素に対して関数を適用し、新しい配列を返します。一方、reduce()は要素を集約して単一の値を返します。

filterとの違い

filterは条件に合う要素を抽出して新しい配列を作成しますが、reduce()は単一の値を返します。

reduce()の使い方・メソッド

reduce()メソッドの基本的な使い方や、重要となる引数を見ていきましょう。

基本的な書き方

reduce()メソッドの基本的な構文は以下のとおりです。

array.reduce(callback(accumulator, currentValue, index, array), 初期値)

callbackは、配列の各要素に対して実行されるコールバック関数で、4つの引数を受け取ります。

※indexとarrayは次項で説明します。

初期値は、蓄積値の初期値です。省略可能ですが、指定をおすすめします。

例：要素の合計を計算する

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

const sum = numbers.reduce((acc, cur) => acc + cur, 0);

console.log(sum); // 出力: 15

初期値に0を指定したので、初回のaccは0です。

各回のコールバック関数は以下の引数を処理し、値を返します。

最後の5回目の返値がreduce()の結果となります。

コールバック関数の引数

reduce()のコールバック関数は、4つの引数を受け取ります。

引数を使用して、より複雑な処理ができます。

例：配列内の偶数番目の要素を合計する

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const sumOfEvenIndexed = numbers.reduce((acc, cur, index) => {

    return index % 2 === 0 ? acc + cur : acc;   // 偶数番目は acc + cur 奇数番目は acc

}, 0);

console.log(sumOfEvenIndexed); // 25 (1 + 3 + 5 + 7 + 9)

上記のコードでは、accに前回までの合計値、curに現在の要素、indexに配列インデックスが入ります。インデックスが偶数の場合にcurを加算し、奇数の場合はそのままaccを返すことで、偶数番目のみ合計しています。

reduce()の注意点について

reduce()メソッドの注意点をいくつかご紹介します。

reduce()では、初期値を省略すると、空の配列ではTypeErrorが発生し、空でない配列では最初の要素が初期値として使用されるため、配列の内容がよく分かっている場合を除き、初期値を指定するのがおすすめです。

また、大きな配列に対してreduce()を使用する場合、コールバック関数内の処理が、実行時間に影響するため注意してください。

reduce()の使用によって副作用が生じる可能性にも注意が必要です。コールバック関数内で外部の変数を変更したり、APIを呼び出したりすると、予期せぬ動作を引き起こす可能性があります。 副作用を避けるには、コールバック関数で扱っている配列以外を変更しないことです。

まとめ

reduce()メソッドは、配列操作のなかでも特に汎用性が高く、さまざまな場面で活用できます。ただし、初期値の指定や副作用の回避など、いくつかの注意点があります。

注意点に気をつけながら、 自分のプロジェクトでreduce()を使う機会を見つけ、実践的なスキルを磨いていきましょう。