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

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

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

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

第3弾の今回はmapメソッドを紹介します。

ちなみに第2弾の記事はこちらから！

map()の基本文法

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

const mapGrammer = scores.map((cur) => cur * 10)
console.log(mapGrammer) //👉　[100, 200, 400, 300, 600]

curには配列内の数字が順番に入り、cur * 10を繰り返し計算し、新たな配列を作ります。

最初は10 × 10＝100
次に20 × 10＝200
次に40× 10＝400,,,,と計算されていき
最終の実行結果は[10, 200, 400, 300, 600]となります。

map()には第2引数、第3引数も入れる事ができますが今回は割愛します。

map()は何をしてくれる？

mapメソッドは上で説明した計算だけではなく、指定のデータを抽出して新たな配列を作ることも可能です。
これをみてください。

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 },
];

const mapMember = members.map((member) => member.name)
console.log(mapMember)

実施結果は、

['Natsumi', 'Takashi', 'Hitomi', 'Jun']

となります。

これは、members配列の中にあるオブジェクトのキーを指定してその値を集めて新たに配列を作っています。

参考：map() vs forEach文

配列内を計算するという点ではforEachも同じですが、大きな違いはforEachは新たに配列を作りません。

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

const testForEach = scores.forEach((cur) => cur * 10)
console.log(testForEach) //👉　undefined

forEachは「returnで返すことはありません」
したがって、下記のように一回限りの計算で終了します。

const scores = [10, 20, 40, 30, 60];
scores.forEach((cur) => console(cur * 10)); // 100, 200, 400, 300, 600 ⇦配列ではない 

計算や特定の要素を取り出して、新たな配列にするのであればmap()
その場限りの計算や要素の取り出しであればforEach()
と使い分けをしましょう。

今回は以上となります。
皆さんのJSの理解に繋がっていれば幸いです。
次回も楽しみにしていてください。

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