【JavaScript入門】初心者でも分かるreduce()の使い方とサンプル例まとめ

こんにちは、ライターのマサトです!

今回は、配列の各要素を順番に累積して1つの値にできる「reduce()」メソッドについて学習をしていきましょう!

この記事では、

・「reduce()」とは?
・「reduce()」の使い方

という基本的な内容から、

・「map()」と「reduce()」の違い
・「break」の代替え方法

などの応用的な使い方に関しても解説していきます。

この記事で、reduce()メソッドをしっかり学習して自分のスキルアップを目指しましょう!

「reduce()」とは?

それでは、まず最初に「reduce()」の基本的な知識から身につけていきましょう!

「reduce()」は、配列データの各要素を累積して1つの値にする用途に最適なメソッドになります。

例えば、次のような配列があるとします。

この例では、数値データが格納された配列と文字列データが格納された配列を用意しました。

reduce()のもっとも分かりやすい使い方は、このような配列に格納された値をすべて足した値を算出したいケースでしょう。

数値であればすべて合計した値を算出し、文字であればすべて繋ぎ合わせた1つの文字列を取得できるわけです。

「reduce()」の使い方

この章では、reduce()の基本的な使い方について見ていきましょう!

基本となる構文から実際のプログラミング手法について学んでいきます。

基本的な構文と書き方について

まずは、もっとも基本となる構文から見ていきましょう!

reduce()は対象となる配列に対して任意の関数を実行することができます。

第1引数の「累積値」には、配列要素を順番に処理していった値が格納されます。

第2引数の「要素」は現在処理されている配列要素を意味しています。

この関数内で「return」を使い、任意の処理を返すことで累積値に結果が保持されて最終的に1つの値となって取得できるわけです。

配列の各要素を合計する方法

それでは、簡単なサンプル例をプログラミングしながら実際の使い方を見ていきましょう!

冒頭でも少し触れましたが、配列に格納された数値データをすべて合計した値を取得してみます。

実行結果

この例では、1〜9までの数値が格納された配列に対してreduce()を実行しています。

関数内では累積値各要素を単純に足し算しているのが分かりますね。

1回目の処理で「1 + 2」となり、その合計が累積値に格納されて次の処理では「3 + 3」が実行されるというわけです。

これにより、実行結果のようにすべての合計値「45」が出力されるのです。

「map()」と「reduce()」の違い

類似メソッドの「map()」との違いについても解説しておきます。

「map()」「reduce()」どちらも配列に対して処理できるメソッドなのですが、その用途については少し違います。

最も大きな違いとしては、「map()」は何らかの処理を行った結果を新しい配列として生成できる点にあります。

例えば、配列に格納されている数値を2倍にした新しい配列を作りたい場合は次のように記述します。

実行結果

この例では、数値が格納されている配列に対してmap()を実行しています。

関数内で配列の各要素を2倍にしてreturnしているのが分かりますね。

これにより、元の数値を2倍にした配列を生成することができるのが実行結果からも分かります。

厳密にはreduce()でも同様のことは出来なくもないのですが、map()を使えば非常に簡単な記述で効率よく行えます。

map()については、基本から応用技までを次の記事で詳しくまとめているのでぜひ参考にしてみて下さい!

【JavaScript入門】配列処理をするmap()の使い方とMapオブジェクトの解説!
更新日 : 2019年5月23日

「break」の代替え方法

ここまで、reduce()の基本的な使い方を見てきましたが1つ注意点があります。

reduce()の関数内では「break」を使って処理を中断する方法が使えません!

そこで代替策として、配列のインデックス番号を活用した中断方法があるのでご紹介しておきます。

実は、reduce()の関数は第4引数まであります。

第3引数の「インデックス番号」は、現在処理されている配列のインデックス番号が格納されています。

第4引数の「配列」は、現在処理されている配列そのものが格納されています。

この引数を活用すれば、次のように処理を途中で中断することが可能です!

実行結果

reduce()の関数内に記述されたIF文に注目してください!

「index >= 3」と条件式に記述することで、配列の3番目のインデックス番号になった時点で任意の処理を実行することができます。

その処理というのが「arr.splice(1)」になり、3番目のインデックス以降の配列要素をすべて削除することになります。

その結果、reduce()の処理は終了することになるので「break」と同様な機能を実行できるわけです。

まとめ

今回は、配列の各要素を累積して1つの値にできる「reduce()」メソッドについて学習をしました!

最後に、もう一度ポイントをおさらいしておきましょう!

・reduce()は配列内の数値や文字列を累積して1つの値にすることができる
・類似メソッドのmap()との違いは結果を新しい配列として生成できるかどうか
・breakが使えないのでインデックス番号を活用して同様の機能を作る

上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう!

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

マサト

マサト

JavaScriptが大好きで、趣味も仕事もJavaScriptを中心に活動していたら、いつの間にかフリーランスになってました。
30代になってからプログラミングを始めた経緯があり、分からないことだらけだった経験を踏まえて、読者に分かりやすい記事制作をモットーにしています。
JavaScript以外の趣味は、旅をしながらの街歩きや登山など。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説