概要
アロー関数について、恥ずかしながら今更気がついた仕様がありましたので、自戒の念を込めて記事化することにしました...
詳細
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 = () => ({});
コメントありがとうございました!
参考にさせていただいた記事
以上です!
何方かのお役に立てたら嬉しいです🙏