JavaScript

関数の記述を簡略化できる、アロー関数(=>) by「JavaScript コードレシピ集」


0. 前提

「JavaScriptコードレシピ集(技術評論社)」の下記を参照しています。


Chap1 JavaScriptの基礎



  • 012 アロー関数(=>)で関数を定義したい




1. アロー関数とは?

// Syntax

(引数) => | 処理内容 | // 関数を定義する


関数を定義する方法は、function宣言の他にアロー関数というものもあります。アロー関数のメリットはふたつあります。



  1. 関数を簡略化して記述可能

  2. thisを束縛できる
    (「JavaScript コードレシピ」P.44から引用)




2. アロー関数で関数を定義


JavaScript


// 関数の定義
const calcSum = (a, b, c) => {
const result = a + b + c;
return result;
};


JavaScript


// 関数の実行(functionと同じ)
calcSum(1, 2, 3);


3. アロー関数の省略記法


  1. 引数が1つのときは「カッコ()」を省略できる

    (引数が0個か、2個以上のときは省略不可)


JavaScript


// 関数の宣言
const myFunction = (a) => {
return a + 2;
};

// 関数の宣言 | カッコを省略
const myFunction2 = a => {
return a + 2;
};



  1. アロー関数内の処理が1行のとき、{}とreturnを省略できる


JavaScript


// 関数の宣言
const myFunction3 = (a) => {
return a + 2;
}

// 関数の宣言 | {}とreturnを省略
const myFunction3 = (a) => a + 2;