【JavaScript・初学者】Reactでよく使われる頻出記法 / mapについて

はじめに

Reactを学習していましたが、JavaScriptの記法についてフワッとしている部分がよくあったので、簡単ですが今回はmapメソッドについて少し調べました。

mapメソッドの使い方

mapは配列の繰り返しをしてくれる関数です。
mapはオブジェクトには使用できないことを覚えておきましょう。

const data = [1,2,3,4]
const result = data.map((num) => {
    return num + 1;
  }
)

const data = {id:1, number: 2}
const result = data.map((num) => {
    return num + 1;
  }
)
// Uncaught TypeError: data.map is not a function

Reactでよくある使い方は、APIにリクエストを送り記事一覧を取得してmapメソッドで使うなどが考えられます。

React

const App = () => {
  const todos = [todo1,todo2,todo3,todo4]
  return (
    <>
      <ul>
        todos.map((todo, i) => {
          <li key={i}>{todo}</li>
        }
      </ul>
    </>
  )
)
}

mapとforEachの違い

一番の違いは戻り値を持つかどうかです。
mapは戻り値として配列を返すのに対し、forEachは単純にコールバック関数の処理を実行するだけです。

const arr = [1, 2, 3, 4, 5];

// forEachの場合
const forEachResult = arr.forEach(value => {
  return value * 2;
});
console.log(forEachResult); // undefined

// mapの場合
const mapResult = arr.map(value => {
  return value * 2;
});
console.log(mapResult); // [2, 4, 6, 8, 10]