JavaScriptの配列には、全ての要素を１つにまとめたい場合に便利な 「reduce」 というメソッドが既存で用意されています。
今回は、reduceメソッドの詳しい使い方について解説をしていきたいと思います。
JavaScriptのreduceメソッドとは？
reduceメソッドは、配列内の要素を1つの値としてまとめたい場合に活用できるメソッドです。
配列内の隣り合う要素に対して関数を実行する処理を繰り返し、最後のループで実行した演算結果を単一の値として取得することができます。
例えば以下のように、各要素に数値型の値が格納されている配列があるとします。
const sampleArray = [1, 2, 3, 4, 5];「これらの要素を全て合算した数値を取得したい」 といった場合に使用できるのが、reduceメソッドです。
reduceメソッドの使い方
それではさっそく、reduceメソッドの使い方について見ていきましょう。
基本構文
reduceメソッドを使用する際の基本構文は、以下のように記述します。
【基本構文】
配列.reduce(コールバック関数, 初期値)メソッドの第１引数には、要素に対して行う処理を定義したコールバック関数を指定します。
第２引数には、任意で処理を実行する際の初期値を指定することができます。
また、コールバック関数の引数には、以下の４つを指定することができます。
- 第1引数 … 処理中の要素の１つ前の要素か、１つ前のループで実行された関数結果、もしくは指定の初期値のいずれか
- 第2引数 … 処理中の要素
- 第3引数 … インデックス
- 第4引数 … メソッドで処理している配列
第１引数に渡される値は、ループ回数や reduceメソッドの第２引数の有無によって変化します。
１回目のループでは配列の先頭要素、もしくは reduceメソッドの第２引数に指定した初期値のどちらかが渡されます。
２回目以降のループでは、前回のループの処理結果が第１引数に渡されます。
第２引数には、現在処理中の要素を指定します。
初期値がある場合は０番目の要素から、無い場合は１番目の要素から順に格納されていきます。
第3引数にはインデックスを、第4引数には処理対象の配列を任意で指定することができます。
第3引数に格納されるインデックスは、第２引数に渡された要素のインデックス番号となります。
メソッドの戻り値は、return文を使用して指定します。
基本的には、それぞれの要素に対して行った処理結果を指定します。
指定した結果が、各ループごとの第１引数に渡す値と、メソッドの戻り値として扱われます。
配列の各要素を合計する
簡単なサンプルを元に、reduceメソッドの実際の使い方を確認していきましょう。
今回は、配列内の各要素を合計するコードを例として紹介します。
【サンプルコード】
const sampleArray = [1, 2, 3, 4, 5];
const result = sampleArray.reduce((num1, num2) => {
return num1 + num2;
});
console.log("合計：" + result);【実行結果】
合計：15reduceメソッドを使用することで、全ての要素を簡単にまとめることができましたね。
同様の処理内容を、forEachメソッドなどを使用して実装することもできます。
【サンプルコード】
const sampleArray = [1, 2, 3, 4, 5];
let result = 0;
sampleArray.forEach((num) => {
result += num;
});ただし、処理内容が複雑化した場合に、reduceメソッドを使用して記述するコードよりも可読性が下がってしまうことがよくあります。
reduceメソッドで実装できる内容の場合は、なるべくそちらを使用するようにするといいでしょう。
mapメソッドとreduceメソッドの違いとは？
reduceメソッドと同じように、配列の要素に対して処理を行うメソッドの１つに、mapメソッドがあります。
mapメソッドは、配列の各要素に対して処理を実行し、その結果を新たな配列として取得するメソッドです。
主に以下の２点で、reduceメソッドと動作が異なります。
- 2つの要素同士に対してではなく、１つ１つの要素に対して処理を行う
- 単一の値ではなく、各要素の処理結果を格納した新たな配列を戻り値として返す
以下の例を元に、実際の動きを見てみましょう。
【サンプルコード】
const sampleArray = [1, 2, 3, 4, 5];
const result = sampleArray.map((num) => {
return num * 10;
});
console.log(result);【実行結果】
[ 10, 20, 30, 40, 50 ]reduceメソッドの時とは異なり、配列が戻り値として返されているのが結果からも分かりますね。
上記の例では、各要素を10倍する処理を実行し、その結果を要素として格納した新たな配列を取得しています。
このように、全ての要素を1つの値としてまとめるのではなく、要素ごとの値を変更したい場合に使用するのが、mapメソッドです。
メソッドを使い分ける際は、戻り値の形式や要素に対する処理方法の違いを元に、使うメソッドを決めるといいでしょう。
reduceメソッドの処理を中断する
ループ処理をする際に、条件によってループをスキップしたり、中断したいといったケースはよくあることかと思います。
しかしながら、reduceメソッドは仕様上、continue や break をブロック内で使用することができません。
そのため、スキップや中断をする場合は他の方法で代用する必要があります。
その回のループのみをスキップしたい場合は、戻り値で前回の処理結果をそのまま次のループへと返すようにしましょう。
【サンプルコード】
const sampleArray = [1, 2, 3, 4, 5];
const result = sampleArray.reduce((num1, num2) => {
if (num2 === 3) {
return num1;
} else {
return num1 + num2;
}
});
console.log(result);【実行結果】
12処理をそのまま中断させたい場合は、spliceメソッドなどと組み合わせることで代替可能です。
【サンプルコード】
const sampleArray = [1, 2, 3, 4, 5];
const result = sampleArray.reduce((num1, num2) => {
if (num1 > 5) {
sampleArray.splice(0);
return num1
}
return num1 + num2;
});
console.log(result);【実行結果】
6ただし、spliceメソッドは破壊的メソッドである関係上、元の配列の内容が変わってしまうデメリットがあるため、必要に応じて配列のコピーを行うなどして対策するようにしてください。
まとめ
今回は、reduceメソッドの使い方について解説しました。
JavaScriptの配列には、reduceメソッドも含め、実行したい目的に合わせたメソッドがいくつも用意されています。
ケースによっては、for文などを使うよりも効率的にコードを記述することができるので、ぜひ積極的に活用していきましょう。
JavaScriptの勉強方法は？
書籍やインターネットで学習する方法があります。昨今では、YouTubeなどの動画サイトやエンジニアのコミュニティサイトなども充実していて多くの情報が手に入ります。
そして、より効率的に知識・スキルを習得するには、知識をつけながら実際に手を動かしてみるなど、インプットとアウトプットを繰り返していくことが重要です。特に独学の場合は、有識者に質問ができたりフィードバックをもらえるような環境があると、理解度が深まるでしょう。
ただ、JavaScriptに限らず、ITスキルを身につける際、どうしても課題にぶつかってしまうことはありますよね。特に独学だと、わからない部分をプロに質問できる機会を確保しにくく、モチベーションが続きにくいという側面があります。独学でモチベーションを維持する自信がない人にはプログラミングスクールという手もあります。費用は掛かりますが、その分スキルを身につけやすいです。しっかりと知識・スキルを習得して実践に活かしたいという人はプログラミングスクールがおすすめです。
プログラミングスクールならテックマニアがおすすめ！
ITスキル需要の高まりとともにプログラミングスクールも増えました。しかし、どのスクールに通うべきか迷ってしまう人もいるでしょう。そんな方にはテックマニアをおすすめします！これまで多くのITエンジニアを育成・輩出してきたテックマニアでもプログラミングスクールを開講しています。
＜テックマニアの特徴＞
・たしかな育成実績と親身な教育 ～セカンドキャリアを全力支援～
・講師が現役エンジニア ～“本当”の開発ノウハウを直に学べる～
・専属講師が学習を徹底サポート ～「わからない」を徹底解決～
・実務ベースでスキルを習得 ～実践的な凝縮カリキュラム～
このような特徴を持つテックマニアはITエンジニアのスタートラインとして最適です。
話を聞きたい・詳しく知りたいという方はこちらからお気軽にお問い合わせください。
