LoginSignup
1
0

[JSX / JavaScript] 波括弧がないアロー関数に戸惑った話

Last updated at Posted at 2024-05-06

概要

アロー関数について、恥ずかしながら今更気がついた仕様がありましたので、自戒の念を込めて記事化することにしました...

詳細

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>;
})}

追記 :pencil: 応用

@juner 様より有益なコメントいただきました :sparkles:
アロー関数の()は、空オブジェクト返したい時ケースでも用いることがあるそうです。

アロー関数での () は {} 空オブジェクト返したい時とかにもよく使いますね(強制的に式にできるので

const func = () => ({});

コメントありがとうございました!

参考にさせていただいた記事

以上です!
何方かのお役に立てたら嬉しいです🙏

1
0
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0