プログラミングを学習する中で、配列の操作は非常に重要なスキルの1つです。
JavaScriptでは配列を操作するための様々なメソッドが用意されていますが、中でも強力な機能を持つものの1つがreduce()です。
しかし、reduce()の使い方は初心者にはわかりにくいと感じる人も多いのではないでしょうか？
実際、筆者も最初は戸惑ってしまいました…。
そこで今回は、JavaScriptのreduce()メソッドについて、初心者でもわかるように基本的な使い方から具体的な活用例まで詳しく解説していきます。
reduce()の特徴をしっかりと掴んで、配列操作の引き出しを増やしていきましょう！
- 現役のフルスタックエンジニアとして活躍中
- 開発チームリーダーとして複数プロジェクトをリード
- 副業プログラミングスクール講師として数百名以上を指導してきた教育のプロ
- プログラミングスクールのカリキュラム執筆経験あり
reduce()とは？
JavaScriptの配列には、さまざまな組み込みメソッドがあります。今回紹介するreduce()は、配列の各要素に対して何らかの処理を行い、最終的に単一の値にまとめるメソッドです。
たとえば、配列の合計値や最大値を求めたり、配列の要素を使って新しいオブジェクトを生成したりといった使い方ができます。reduceは「減らす」という意味ですが、これは配列の要素を1つの値に集約するというニュアンスからきています。
reduce()の基本的な使い方
構文
reduce()の基本的な構文は次の通りです。
array.reduce(callback[, initialValue])- callback: 各要素に対して実行するコールバック関数
- initialValue: 任意の初期値
コールバック関数には、4つの引数を指定できます。
array.reduce((accumulator, currentValue, currentIndex, array) => { /* ... */ })それぞれの引数の意味は以下の通りです。
- accumulator（acc）: 累積値。各要素を処理した中間結果が格納される
- currentValue（cur）: 現在処理されている配列の要素
- currentIndex: 現在処理されている配列のインデックス番号（0から開始）
- array: reduce()を呼び出した元の配列
実際にどのように使えるのか、具体例を見ていきましょう。
配列の合計値を求める
1つ目の例は、配列に含まれる数値の合計値を求めるプログラムです。
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, cur) => acc + cur);
console.log(sum); // 15ここでは、accには前の処理の結果（合計値）が、curには現在の要素の値が順番に渡されていきます。
各ステップでacc + curが実行され、最終的に配列のすべての要素を足し合わせた値が返されます。
reduceの初期値を省略した場合、accの初期値にはnumbersの最初の要素である1がセットされ、curには2番目の要素の2から処理が開始されます。
文字列の配列を連結する
次は、文字列が含まれた配列の要素をすべてつなぎ合わせて1つの文字列にする例です。
const strings = ['Hello', ' ', 'World', '!'];
const message = strings.reduce((acc, cur) => acc + cur);
console.log(message); // "Hello World!"こちらも、合計値を求める場合と同様に、accには前のステップまでの連結結果が、curには現在の要素が渡され、最終的にすべての文字列が結合されます。
初期値を指定する
先ほどの例では、accの初期値を指定していませんでした。明示的に初期値を指定するには、reduce()の第2引数に初期値を渡します。
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, cur) => acc + cur, 0);
console.log(sum); // 15この例では、第2引数に0を渡しているので、accの初期値は0になります。そして最初から配列の要素が順番に処理されていきます。
reduce()とmap()の違い
ここで、配列の各要素に対して処理を行うメソッドとして有名なmap()との違いについて触れておきましょう。
たとえば、配列の各要素を2倍した値の配列を取得したい場合はmap()を使います。
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]一方、reduce()ではこのような配列ではなく1つの値を返します。reduce()で同じように各要素を2倍にしても、結果はその合計値になります。
const numbers = [1, 2, 3, 4, 5];
const doubledSum = numbers.reduce((acc, cur) => acc + cur * 2, 0);
console.log(doubledSum); // 30reduce()は配列から単一の値を取得したいときに使うのが基本ですが、map()と組み合わせるとより柔軟な処理ができます。まずmap()で配列を変換してから、reduce()で集計するのが定番のパターンです。
reduce()の注意点
reduce()を使う際の注意点としては、空の配列に対してreduce()を呼び出すとエラーになることが挙げられます。
const empty = [];
// 初期値を指定しない場合はエラー
console.log(empty.reduce((acc, cur) => acc + cur)); // エラー空の配列にreduce()を使う場合は、必ず初期値を指定するようにしましょう。
const empty = [];
// 初期値を指定すればエラーにはならない
console.log(empty.reduce((acc, cur) => acc + cur, 0)); // 0空の配列に初期値0を指定してreduce()を呼び出せば、結果は0になります。
また、通常のループ処理と違って、reduce()の途中で処理を中断することはできません。配列のすべての要素が最後まで処理されます。
まとめ
今回は、JavaScriptのreduce()メソッドについて詳しく解説しました。reduce()は配列の要素を順番に処理し、最終的に単一の値を返すメソッドです。
- 配列の合計値や、要素をまとめて1つの文字列にするのに便利
- reduce()とよく似たmap()は、配列の各要素を加工して新しい配列を返すメソッド
- reduce()は空の配列に使うと例外が発生するので、初期値の指定が重要
reduce()をマスターすることで、配列を自由自在に操ることができるようになるはずです。ぜひ色々な場面で活用してみてください。
JavaScriptを効率的に身につける勉強法は？
JavaScript には興味があっても、プログラミング学習をはじめたばかりであれば、以下のような疑問を持つかもしれません。
- JavaScript を身に付けてエンジニアになるには何をすればいい？
- 何から勉強すればいいんだろう？
- 効率よく勉強するには？
JavaScriptは学ぶべき内容が非常に多いため、勉強法の選び方を間違うと時間・労力・お金が無駄になってしまいます…。
そのため、こちらの記事を参考に、ご自身に最適な学習方法を選んでみませんか？
