【まっぷかんすう】
map関数 とは？
最終更新:
💡 一つずつ変身させて、新しい配列へ
要素を関数で変換し、その結果を集める操作。JavaScriptのArray.map()は、配列の各要素の変換結果から新しい配列を作ります。
📌 このページのポイント
- JavaScriptのArray.map()は、関数の戻り値を集めた新しい配列を返す
- 例：[1, 2, 3]の各値を2倍にすると[2, 4, 6]になる
- 新しい配列でも、中のオブジェクトまで自動で複製されるわけではない
- 結果の配列が不要な処理には、forEachやfor文などを検討する
ひよこ どう使うの？
ペンギン先生 JavaScriptなら、[1, 2, 3].map(n => n * 2)で[2, 4, 6]を作れるよ。nには各要素が順番に入り、関数が返した値が新しい配列の要素になるんだ。商品データから名前の一覧を作るような変換にも使えるよ。
ひよこ 元の配列は絶対に変わらない？
ペンギン先生 ひよこ 戻り値を書き忘れたら？
ペンギン先生 関数が何も返さないと、その位置の結果はundefinedになるよ。要素を取り除きたいならfilter、出力するだけならforEachやfor文など、目的に合う操作を選ぼう。空きスロットのある配列では、その空きに対してmapの関数は呼ばれないという点もあるよ。
ひよこ asyncの関数を渡したら、結果を待ってくれる？
ペンギン先生 ひよこ flatMapは何が違うの？
ペンギン先生 mapの変換結果を、さらに1段だけ平らにする操作だよ。たとえば[1, 2].flatMap(n => [n, n * 10])は[1, 10, 2, 20]になる。深い入れ子を全部平らにするわけではないんだ。なお、言語やライブラリによってmapの戻り値や仕組みは異なるから、使うものの仕様を確認しよう。
まとめ：ざっくりこれだけ覚えればOK！
「map関数」って出てきたら「要素を一つずつ変換して、その結果を集める操作」と思えばだいたいOK！
📖 おまけ：英語の意味
「map」 ＝ 対応づける
💬 元の要素と変換後の値を対応づけるイメージだよ。ここではJavaScriptの配列のmapを中心に説明するね。