zukucode
主にWEB関連の情報を技術メモとして発信しています。

JavaScript reduce関数の基本的な使い方

JavaScriptreduce関数の基本的な使い方を説明します。

以下のコードはreduce関数を使って配列の合計値を求めています。

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

var sum = arr.reduce(function (result, current) {
  return result + current;
}, 0);

console.log(sum); // 15

解説

配列.reduce(関数, 初期値);としたとき、reduce関数は、配列の要素を1つづつ引数で指定した関数の処理を実行していきます。

文章で説明するのは難しいので、上記のサンプルをログ出力しながら確認します。

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

var sum = arr.reduce(function (result, current) {
  console.log('result=' + result + '  current=' + current);
  return result + current;
}, 0);
/* 出力結果
result=0  current=1
result=1  current=2
result=3  current=3
result=6  current=4
result=10  current=5
*/

forEachのように、配列の要素の数だけ指定した関数が実行されます。

forEachと違うのは関数の引数と関数にreturnがあるところです。

resultには関数でreturnした値が入ります。最初の要素の場合はreturnした値が存在しないことになりますが、reduce関数の第2引数がresultの初期値となります。

上記の例では0を指定しているので、最初の要素のresult0になっていることを出力結果から確認できます。

currentには現在の要素の値が入ります。こちらはforEachと同じイメージで、配列の要素の値が1つづつ順番に入ります。

resultcurrentの値に対して何かしらの処理をしてその結果をreturnすれば、配列の集計が簡単に行えるようになります。

例えばSQLの集計関数のように配列のMaxMinCountreduce関数で実装するには以下のようにします。Minの場合は初期値が0だと0が最小値になってしまうので、nullを初期値にしています。

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

var max = arr.reduce(function (result, current) {
  return result < current ? current : result; // Max
}, 0);

var min = arr.reduce(function (result, current) {
  if (result == null) return current;
  return result > current ? current : result; // Min
}, null);

var count = arr.reduce(function (result, current) {
  return result + 1; // Count
}, 0);

console.log(max); // 5
console.log(min); // 1
console.log(count); // 5

配列の長さ(Count)を取得したい場合はlengthを使えばいいですし、MaxMinを取得したい場合はJavaScript 配列の要素で最大値・最小値を取得するで紹介した方法を使ったほうが簡単です。

個人的にはreduce関数が本領発揮するのはオブジェクト配列の集計時だと感じています。

オブジェクトの配列でも考え方は同じです。JavaScript オブジェクト配列をsqlのgroup byのように集計するでオブジェクト配列での集計方法を紹介します。

IE8以下の対応

IE8以下はreduce関数が使用できません。

下記のURLで紹介されているfunctionを実装すればreduce関数を使用できるようになります。

Array.prototype.reduce() - JavaScript | MDN


関連記事

  • webpack-dev-serverでhttpsでのアクセスを可能にする方法

    webpack-dev-serverでhttpsでのアクセスを可能にする方法を紹介します。外部APIのテストや、メディアデバイスのテストなどで、開発中のlocalhostをhttpsにする必要があると...


  • ASP.NET UpdatePanelでPostBack時にフォーカス状態を保持する

    ASP.NETのUpdatePanelでPostBack時にコントロールのフォーカス状態を保持する方法を紹介します。UpdatePanelのポストバックの開始と終了のイベントを設定するで紹介した方法で...


  • stylelintで例外(無視)するタグを指定する

    cssで構文チェックを行うstylelintで任意のタグを無視してエラーとしない方法を紹介します。以下のようにruleのignoreTypesで無視するタグを指定します。以下の例ではamp htmlの...


  • JavaScript localStorageの基本的な使い方まとめ

    JavaScriptでデータをブラウザに簡単に保存する仕組みのlocalStorageの基本的な使い方を紹介します。keyは保存するときにキーとなる値です。取り出すときにこのキーを指定して取得します。...


  • JavaScript 文字列を連結する

    JavaScriptで文字列を連結します。JavaScriptでは文字列の連結は文字列同士を+で結合できます。例えば以下のように、数値同士を+演算子で計算すると足し算が行われてしまうので注意します。上...


  • JavaScript 0埋めをするテキストボックスを作成する

    テキストボックスで値を入力後、指定した文字数に0埋めする処理を実装します。以下のURLで紹介した処理を組み合わせれば簡単に実装できます。JavaScriptで指定した文字数に0埋めをするとJavaSc...


  • JavaScript ¥(円マーク)を文字列で扱う

    JavaScriptの¥(円マーク)は、正しく設定していないと利用者のPCのOSなどの環境によっては\(バックスラッシュ)で表示されてしまう可能性があるので、扱いには注意が必要です。JavaS...


  • JavaScript trimで前後の空白(スペース)を削除する

    JavaScriptで文字列の前後の空白(スペース)を削除します。trim関数を使えば先頭と末尾の半角スペース、全角スペースの両方が削除されます。IE8以下の場合はtrim関数が使えないので自作する必...


  • JavaScript 時刻の妥当性チェックをする

    時刻の妥当性チェックを行います。HH:mm書式で00:00〜23:59までの範囲が有効になるように正規表現でチェックをしています。


  • JavaScript システム日付を取得する

    JavaScriptでシステム日付を取得するには以下のように、Dateオブジェクトを宣言します。取得したDateオブジェクトから年〜ミリ秒までをそれぞれ取得できます。月だけは0から始まるので+1をする...