JavaScript スキルアップ

【5分で理解⑦ (配列編)】JavaScriptの配列のreduceメソッドで配列の値を"集約"する

こんにちは。
大阪でフロントエンド兼マネージャー兼Webチームの採用担当をしている筆者です👾

配列はJavaScript（以下JS）を理解する上では必須の項目です。
JavaScriptの配列で使うメソッド多くあります。

それらのメソッドは便利でコードの可読性を上げてくれるのですが、覚えるのが大変です。
そこで重要なメソッドだけにスポットをあて短くまとめてシリーズにして紹介しています。

そして今回がこのシリーズの最終回です！

第７弾はreduceメソッドを紹介します。
reduceメソッドも最初は混乱しますが役に立つメソッドですのでここで理解しておきましょう。


reduce()の基本文法

const scores = [10, 20, 40, 30, 60];

//基本文法 👉 const result = array.reduce((一つ前の値, 現在の値){ return 一つ前の値 + 現在の値}, 初期値)

const reduceGrammer = scores.reduce((acc, cur) => acc + cur, 0)
console.log(reduceGrammer) //👉　160

これを実行すると、
160
となります。

では、説明していきます。

reduceメソッドが使われている際はaccという文字をよく見ます。
accとはaccumulatorの「累積する」の省略形です。
reduceでは配列内の値を順番に累積し、総和を得ることができるメソッドです。

今回は初期値が「0」としているので、
・最初のaccには0が入り、そこに一つ目の値のcurの10を足します。(0 + 10 = 10)
・次はaccに前回の合計値の10が入り、二つ目の値のcurの20を足します。(10 + 20 = 30)
・さらに次はaccに前回の合計値の30が入り、三つ目の値のcurの40を足します。
.....この動作を最後まで繰り返してその配列の総和を出します。
それが160です。

初期値を100にすると260という結果が返ってきます。


reduce()で何ができる？

繰り返しになりますが、reduceメソッドは配列内の値を順番に累積し、総和を得ることができるメソッドです。
もちろんオブジェクトのデータも下記のようにすれば総和を取得できます。

const members = [
  { name: 'Natsumi', old: 21, gender: 'female', height: 158 },
  { name: 'Takashi', old: 18, gender: 'male', height: 180 },
  { name: 'Hitomi', old: 17, gender: 'female', height: 163 },
  { name: 'Jun', old: 32, gender: 'male', height: 165 },
];

//メンバーの年齢の平均を出す方法
//①まず年齢の合計をreduce()で算出
const totalAge = members.reduce((acc, cur) => acc + cur.age, 0);
console.log(totalAge); //👉 88

//②①で出た合計値を人数で割る
console.log(totalAge / members.length) //👉 22


データを加工すればいろんなことに応用できそうですね。

少し応用とはなりますが、初期値を空のオブジェクトにすることでこんなこともできます。

const members = [
  { name: 'Natsumi', old: 21, gender: 'female', height: 158 },
  { name: 'Takashi', old: 18, gender: 'male', height: 180 },
  { name: 'Hitomi', old: 17, gender: 'female', height: 163 },
  { name: 'Jun', old: 32, gender: 'male', height: 165 },
　{ name: 'Manami', old: 19, gender: 'female', height: 160 }
];

const numbersOfGender = members.reduce((acc, cur) => {
  const gender = cur.gender;
  if (acc[gender]) {
    acc[gender]++;
  } else {
    acc[gender] = 1;
  }
  return acc;
}, {});
console.log(numbersOfGender); //👉 {female: 3, male: 2}

このようにする事で、それぞれの性別が何名づついるかを算出することができます。



今回は以上となります。
5分インプットのシリーズは今回で最後です。
またJSの別の項目でできればと思っております！

皆さんのJSの理解に繋がっていれば幸いです。




▼▼あわせて読みたいの記事▼▼

【5分で理解⑥】JavaScriptの配列のsortメソッドで配列を”ソート（順番替え）”する

-JavaScript, スキルアップ
-, , , , ,