すみません
JavaScriptやフロントエンドフレームワークについてはかなり初心者です。
誤っている点ありましたらどんどんご指摘いただければと思います。
内容
Remixにてとある画面表示でmap関数を使っている。
下記のように書いていた。
{hoges.map(hoge => (
<li key={hoge.fuga.id}>{hoge.fuga.name}</li>
))}
表示だけならこれだけで全然問題ない。
ただ、mapの中のhogeをconsole.logしたくて、下記のようなコードを書いたところエラーになった。
{hoges.map(hoge => (
// 丸括弧使用だけはエラーになる
console.log(hoge);
<li key={hoge.fuga.id}>{hoge.fuga.name}</li>
))}
ちょっと調べたところ下記の様にmap関数の引数のコールバック関数でちゃんとreturnすればconsole.log(hoge);を書いてもエラーにならないらしい。
{hoges.map(hoge => {
// 中括弧使用 + returnがあればエラーにはならない
console.log(hoge);
return <li key={hoge.fuga.id}>{hoge.fuga.name}</li>;
})}
両方ともmap関数の引数がコールバックであることは間違いないのだが、なぜ後者だとエラーが出ないのか調べたので簡単にまとめてみる。
エラーが出るパターンの解説
map関数の引数でクロージャが渡されているが、丸括弧が使われている。
どうやら丸括弧を使うと、丸括弧内部の単一の式の暗黙のreturnが行われるようだ。
暗黙のreturnが行われるので丸括弧内部には単一の式しか書けない。いくら行を変えたとしても単一の式しか書けない。
だから下記はエラーになる。
{hoges.map(hoge => (
// 括弧使用だけはエラーになる
console.log(hoge);
<li key={hoge.fuga.id}>{hoge.fuga.name}</li>
))}
エラーが出ないパターンの解説
map関数の引数でクロージャが渡されているが、中括弧が使われている。明示的にreturnも行われている。
このタイプのクロージャの省略記法は割と一般的でよく見るタイプだ。
クロージャの中の処理でもちろん複数の式を書くことができる。暗黙的にreturnされることもない。ただしコード量は増える。
returnする内容を指定でき、複数の式を記載する事ができる。
だから下記はエラーにならない。
{hoges.map(hoge => {
// 中括弧使用 + returnがあればエラーにはならない
console.log(hoge);
return <li key={hoge.fuga.id}>{hoge.fuga.name}</li>;
})}
追記（2024/10/15）
先輩に教えていただきました！忘れたくないので簡単にメモします！
- アローの省略形は
hoge =>が「=>の後ろをreturnします」という意味 -
hoge =>の後ろが式()であるかコードブロック（文など）{}であるかが重要 - 式というのは「1 + 1」のようなその一行で結果があるもの
- 文というのはif文のようなそれ単体では結果が返されないもの