【JavaScript】function構文とアロー関数の違い、省略した書き方について

function構文で書いた以下の記事を発展させ、アロー関数について整理します。

【JavaScript】関数、ローカルスコープ、グローバルスコープ、引数、戻り値
https://qiita.com/kuro_96/items/21e670aa10861d997f8a

アロー関数を使うメリット

次の条件で省略が可能、コードがシンプルになる
　・引数が1つの場合：引数を囲む()を省略できる
　・引数がない場合：()だけ記載する
　・実行内容が1文である場合：{}を省略できる
　・多くの学習サイトでfunction構文からアロー関数への移行が進んでいる（情報が多い）

以上がfunction構文よりもアロー関数を使う理由です。

function構文の関数の書き方（復習）

関数を作る

constで関数の容れ物を作り、

    const 関数名 = function(){
        実行内容;
    }

作った関数を呼び出すときは

        関数名();
        関数名(引数);

とする。
以下は引数を受けとり、表示させる関数hello。

        const hello = function(name){
            console.log(`こんにちは、${name}さん`)
        }
        hello("you");

アロー関数の書き方

function構文との違い

function構文と比較して説明。

・function()から"function"をとる
・()の後に"=>"を追加する
　矢印（アロー）を実行処理{}に向けて指すと覚えている

    const 関数名 = () => {
        実行内容;
    }

先の関数helloの場合

        const hello = (name) => {
            console.log(`こんにちは、${name}さん`)
        }
        hello("you");

省略した記法

・引数が1つの場合、引数を囲む()を省略できる
・実行内容が1文である場合、{}を省略できる

    const 関数名 = 引数 => 実行内容;

先の関数helloの場合

        const hello = name => console.log(`こんにちは、${name}さん`);
        hello("you");

・引数がない場合は()だけ記載する

    const 関数名 = () => 実行内容;

あるいは

    const 関数名 = () => {
        実行内容;
    }

決まった文章を表示するgreet関数の場合

    const greet =  () => console.log("こんにちは。個人ゲーム作家のkuroと申します。");
    greet();

実行結果

    こんにちは。個人ゲーム作家のkuroと申します。

こちらで書いたadd関数の場合
【JavaScript】関数、ローカルスコープ、グローバルスコープ、引数、戻り値
https://qiita.com/kuro_96/items/21e670aa10861d997f8a

    const add = function(a,b){
        function add(a,b){
            return a + b;
        }
        console.log(1,2);
    }

アロー関数+省略記法

    const add = (a,b) => a+b;
    console.log(add(1,2));