概要
アロー関数について、恥ずかしながら今更気がついた仕様がありましたので、自戒の念を込めて記事化することにしました...
詳細
JSXを記載している時の話...
以下のコードを書いて保存すると、
{members.map((member, i) => <li key={i}>{member}</li>)}
↓ Prettier によって整形された
{members.map((member, i) => (
<li key={i}>{member}</li>
))}
「...ん?」
アロー関数が改行されているのに {} ではなく、 ()とされている?
てっきり以下のような記載になると思っていた...(これでも動きます)
{members.map((member, i) => {
return <li key={i}>{member}</li>;
})}
この記法について調査してみました。
わかったこと
アロー関数は()と{}で動きに違いあることがわかりました。
それぞれ以下の挙動になるようです。
()を使った場合
アロー関数で()を使うと、内部に書かれた式が直接返り値となります。
明示的にreturnを書かずともその結果が返されます。
{members.map((member, i) => (
<li key={i}>{member}</li>
))}
{}を使った場合
アロー関数で{}を使うと、内部で計算や複数のステートメントを実行できます。
結果を返すためには、return文が必要です。
{members.map((member, i) => {
return <li key={i}>{member}</li>;
})}
追記
応用
@juner 様より有益なコメントいただきました ![]()
アロー関数の()は、空オブジェクト返したい時ケースでも用いることがあるそうです。
アロー関数での () は {} 空オブジェクト返したい時とかにもよく使いますね(強制的に式にできるので
const func = () => ({});
コメントありがとうございました!
参考にさせていただいた記事
以上です!
何方かのお役に立てたら嬉しいです🙏