1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-05-09

#【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));
1
0
0

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

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?