kakureblog

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

JavaScript

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

投稿日:

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

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

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

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

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

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



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の理解に繋がっていれば幸いです。
次回も楽しみにしていてください。




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

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

-JavaScript
-, , , , ,

執筆者:

関連記事

JS

【5分で理解④ (配列編)】JavaScriptの配列のsomeメソッドで配列内に”存在確認”

第4弾は配列内の存在の有無を確認する時に便利なsomeメソッド

JS

newとインスタンスの関係

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

JS

【5分で理解① (配列編)】JavaScriptの配列のfindメソッド基本理解

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

JS

【JS】forEach・map・filter・reduce それぞれ説明【配列実践スキル】

こんにちは。今回はJavaScript(以下JS)の基本である配列について書きたいと思います。配列の中でも特に下記にフォーカスを当てていきます。SEOガン無視の短い内容となってますので、サクッと見れま …

JS

【5分で理解⑤ (配列編)】JavaScriptの配列のeveryメソッド ーsomeメソッドとの違いー

第5弾はeveryメソッド

me

Taka

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