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

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

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

この記事では、

という基本的な内容から、応用的な使い方に関しても解説していきます。この記事で、reduce()メソッドをしっかり学習して自分のスキルアップを目指しましょう！

「reduce()」とは？

それでは、まず最初に「reduce()」の基本的な知識から身につけていきましょう。「reduce()」は、配列データの各要素を累積して1つの値にする用途に最適なメソッドになります。

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

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

var strings = ['リンゴ','バナナ','メロン','スイカ','レモン'];

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

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

「reduce()」の使い方

この章では、reduce()の基本的な使い方について見ていきましょう。基本となる構文から実際のプログラミング手法について学んでいきます。

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

まずは、もっとも基本となる構文から見ていきましょう。reduce()は対象となる配列に対して任意の関数を実行することができます。

配列.reduce(function(累積値, 要素) { })

第1引数の「累積値」には、配列要素を順番に処理していった値が格納されます。第2引数の「要素」は現在処理されている配列要素を意味しています。この関数内で「return」を使い、任意の処理を返すことで累積値に結果が保持されて最終的に1つの値となって取得できるわけです。

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

それでは、簡単なサンプル例をプログラミングしながら実際の使い方を見ていきましょう。冒頭でも少し触れましたが、配列に格納された数値データをすべて合計した値を取得してみます。

var numbers = [1,2,3,4,5,6,7,8,9];
var result = numbers.reduce(function(a, b) {

  return a + b;

})

console.log(result);

実行結果

45

この例では、1〜9までの数値が格納された配列に対してreduce()を実行しています。関数内では累積値と各要素を単純に足し算しているのが分かりますね。

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

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

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

最も大きな違いとしては、「map()」は何らかの処理を行った結果を新しい配列として生成できる点にあります。例えば、配列に格納されている数値を2倍にした新しい配列を作りたい場合は次のように記述します。

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

var result = numbers.map(function(num) {
  return num * 2;
})

console.log(result);

実行結果

[2, 4, 6, 8, 10]

この例では、数値が格納されている配列に対してmap()を実行しています。関数内で配列の各要素を2倍にしてreturnしているのが分かりますね。これにより、元の数値を2倍にした配列を生成することができるのが実行結果からも分かります。

厳密にはreduce()でも同様のことは出来なくもないのですが、map()を使えば非常に簡単な記述で効率よく行えます。map()については、基本から応用技までを次の記事で詳しくまとめているのでぜひ参考にしてみて下さい！

「break」の代替え方法

ここまで、reduce()の基本的な使い方を見てきましたが1つ注意点があります。reduce()の関数内では「break」を使って処理を中断する方法が使えません！

そこで代替策として、配列のインデックス番号を活用した中断方法があるのでご紹介しておきます。実は、reduce()の関数は第4引数まであります。

配列.reduce(function(累積値, 要素, インデックス番号, 配列) { })

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

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

var numbers = [1,2,3,4,5,6,7,8,9];
var result = numbers.reduce(function(a, b, index, arr) {

  if(index >= 3) arr.splice(1);
  
  return a + b;

});

console.log(result);

実行結果

10

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

「index >= 3」と条件式に記述することで、配列の3番目のインデックス番号になった時点で任意の処理を実行することができます。その処理というのが「arr.splice(1)」になり、3番目のインデックス以降の配列要素をすべて削除することになります。

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

まとめ

今回は、配列の各要素を累積して1つの値にできる「reduce()」メソッドについて学習をしました。最後に、もう一度ポイントをおさらいしておきましょう！

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