【初心者】mapメソッドについて

こんにちは。
先日作成したアプリを作る中でmapについてよく理解できなかった部分があったので、
今回はmapについてまとめてみることにしました。

理解・解釈が不十分なところに関してはコメントでアドバイスいただけると嬉しいです！

mapとは

簡単にいうと、配列の要素を取り出して新しい配列を作るものです。
配列の各要素を変換して、新しい配列を返す、JavaScriptのメソッドです。
もとの配列はそのまま残ります（非破壊的）。

例

const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2);
console.log(numbers); // [1, 2, 3]（元の配列は変わらない）
console.log(doubled); // [2, 4, 6]（新しい配列が作られる）

気をつけるべきこと

アロー関数の()と{}で書き方が異なる

()を使う

const items = [{ name: "りんご" }, { name: "バナナ" }];

items.map((item) => (
  //return不要
  <p>{item.name}</p>
));

{}を使う

items.map(item => {
  // returnが必要
  return <p>{item.name}</p>;
});

これはアロー関数の仕様の違いで、
() で書くと、1つの値,式を直接書く必要がある代わりに自動でreturnでき(暗黙的(implicit)なreturn)、
{} で書くと、複数行の処理を書けますがreturnを書く必要があります(明示的(explicit)なreturn)。

forEachとの違い

forEach→配列の各要素に対して関数を実行するが、新しい配列を返さない。（戻り値は常に undefined）
map→各要素を変換して、新しい配列を返す。

const items = [{ name: "りんご" }, { name: "バナナ" }];

// forEach(戻り値なし)
const result = items.forEach(item => item.name);
console.log(result); // undefined

// map(新しい配列を返す)
const names = items.map(item => item.name);
console.log(names); // ["りんご", "バナナ"]

Reactで書く時にはkeyが必要

Reactでmapを使って要素を並べるには、各要素の親タグにkeyプロパティを設定する必要があります。

const items = [
  { id: 1, name: "りんご" },
  { id: 2, name: "バナナ" }
];
return(
<div>
    {items.map(item => (
      <p key={item.id}>{item.name}</p>
    ))}
</div>
);

終わりに

今回も最後まで読んでいただきありがとうございました！
また次回の記事でお会いしましょう！