解決したいことアロー関数について、()=>()という書き方はどういう時に使うのでしょうか？ ※アロー関数と言えば、()=>{}という書き方ををよく目にします。ソースコード i...

(hoge) => (fuga) は (hoge) => { return fuga } と等価です。つまり() => ()は後ろの()の値を返す、returnを省略した形のア...

アロー関数の処理内容がreturn文のみの場合、中括弧{}とreturnは省略できます。ご記載の例については、()=>()という構文があるのではなく、可読性を理由に、returnする内容...

[Q&A] ()=>()の意味

()=>()の意味

アロー関数について、()=>()という書き方はどういう時に使うのでしょうか？
※アロー関数と言えば、()=>{}という書き方ををよく目にします。

import React from 'react';

const Header = () => (
    <header>
        <h1>Event Manager</h1>
    </header>
);

export default Header;

MDNで調べましたが、()=>()についての適切な説明を見つける事ができませんでした。

以上、お手数ではございますが
もしご存知の方がいらっしゃいましたら
ご教示の程よろしくお願い申し上げます。

2Answer

(hoge) => (fuga) は (hoge) => { return fuga }
と等価です。つまり() => ()は後ろの()の値を返す、returnを省略した形のアロー関数ですね。

@take_me
https://iwb.jp/javascript-arrow-function-omits-return-tips/
この辺とか参考になりそうです。
より詳しく色々なパターンを知りたい場合「JavaScript アロー関数 return 省略」と検索すると良いでしょう。
@yosaku_ibs
Questioner
take_me様

お世話になります。

ご回答下さり誠にありがとうございます。

(hoge) => (fuga) は (hoge) => { return fuga }

と等価です。

このご説明の仕方が直感的に理解しやすく非常に納得のできる説明でした。

また、ご紹介くださったリンク先の記事も拝見させて頂きました。

アロー関数についての知識が増えました。

ご教示下さり誠にありがとうございました。

厚く御礼申し上げます。

アロー関数の処理内容がreturn文のみの場合、中括弧{}とreturnは省略できます。
ご記載の例については、()=>()という構文があるのではなく、可読性を理由に、returnする内容を単に丸括弧で囲んだものだと思います。
以下のコードはすべて同一の処理内容となります。

const Header = () => {
    return (
        <header>
            <h1>Event Manager</h1>
        </header>
    );
}

const Header = () => (
        <header>
            <h1>Event Manager</h1>
        </header>
);

const Header = () => 
    <header>
        <h1>Event Manager</h1>
    </header>
;