kakureblog

未経験からエンジニアになれた経験、エンジニア転職のヒントやプログラミングのTipsを届けます🤟

JavaScript

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

投稿日:

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

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

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

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

第7弾は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
-, , , , ,

執筆者:

関連記事

JS

【5分で理解③ (配列編)】JavaScriptの配列のmapメソッドで繰り返し計算や指定要素だけ抽出

第3弾は繰り返し計算や指定要素だけ抽出する時に便利なmapメソッドです。

JS

【JS】イベントリスナー’ DOMContentLoaded ‘と’ load ‘の違いを解説

こんにちは。今回はJavaScript(以下JS)のロード系?のイベントリスナーについて書きたいと思います。 ・DOMContentLoaded・load これらのイベントリスナーはJSを学習しはじめ …

JS

newとインスタンスの関係

newとインスタンスについて自分なりに理解した流れを書きます。

JS

【5分で理解②(配列編)】JavaScriptの配列のfilterメソッドで配列要素を”絞り込む”

第2弾は配列内データを検索する時に便利なfiterメソッドです。

JS

【JS】8分で理解 deferとasyncを図で説明してみた【図解】

こんにちは。今回はJavaScript(以下JS)の「defer属性」と「async属性」について解説します。これらの属性を使うことでページの表示速度をあげることが出来るのでぜひ理解しましょう。早速、 …

me

Taka

学生時代にアメリカ(サンフランシスコ)とカナダ(トロント)にそれぞれ約1年間づつ住んでいました。特にサンフランシスコではシリコンバレーに訪れた際にITの素晴らしさに触れ感動しました。IT業界で働くと決心した瞬間でもありました。現在はWeb制作に携わる会社員です。