map関数で()か{}で迷うことはないですか？

2023.08.13

map関数を使用するときに、map(() => ())の丸括弧で使う場合と、場合とmap(() => {})の波括弧で使う場合がないですか？

map関数についてちゃんと理解していれば、この違いが生じるのは当然であることは理解できると思いますが、本記事では改めて整理します。

map(() => ())

この方法では、アロー関数の後ろに丸括弧()が使われています。

丸括弧は、アロー関数で直接returnされる式を囲むために使われます。

この方法を使うと、return文を書かずにすぐに式を返すことができます。

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

return (
  <ul>
    {numbers.map(number => (
      <li key={number}>{number}</li>
    ))}
  </ul>
);

この方法では、アロー関数の後ろに中括弧{}が使われています。

中括弧の中で複数のステートメントを実行することができ、その中でreturn文を使用して値を返す必要があります。

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

return (
  <ul>
    {numbers.map(number => {
      return <li key={number}>{number}</li>
    })}
  </ul>
);

map(() => ()) は式の結果を直接返すシンプルな方法で、コードが簡潔になります。
map(() => {}) は、複数の命令を実行することができ、最後にreturn文を使用して結果を返す方法です。この方法は、マッピングする前や後に追加のロジックを実行する場合など、もう少し複雑な操作を行いたいときに役立ちます。

つまり、map関数とかは関係なく、アロー関数の使い方の問題ですね！

以前に以下の記事でいろいろなアロー関数にについてまとめているのでご覧ください！