【JavaScript】関数定義の書き方（関数宣言、関数リテラル、アロー関数）

JavaScriptでは関数定義の書き方がバリエーションに富んでいるためまとめてみました。

関数宣言

function 関数名(引数){処理}の形式で定義する方法です。他言語でもよく見る、ごく一般的な定義方法です。

// 関数定義
function hellofunc(name1, name2){
    console.log("こんにちは " + name1 + ", " + name2 );
}
// 関数コール
hellofunc("ゴロー", "花");

こんにちは ゴロー, 花

※JavaScriptは動的型付け言語であるため、引数に型宣言はありません。引数の変数名のみ定義します。

関数リテラル

変数に function(引数){処理} の形式で定義した関数を代入します。関数の定義本体に名前がないため、無名関数または匿名巻数と呼びます。

// 関数リテラル定義
const hellofunc = function(name1, name2){
    console.log("こんにちは " + name1 + ", " + name2 );
}
// 関数コール
hellofunc("ゴロー", "花");

こんにちは ゴロー, 花

アロー関数

関数リテラルの記述方法はさらに省略することが可能です。=>で書くためアロー関数と呼ばれます。

• 基本形：functionを削って アロー記号=>を付けます。

  const hellofunc = (name1, name2) => {
      console.log("こんにちは " + name1 + ", " + name2 );
  }

• 処理が一行なら{}も省略可能

  const hellofunc = (name1, name2) => console.log("こんにちは " + name1 + ", " + name2 );

• 引数が一つしかないなら()も省略可

  const hellofunc = name1 => console.log("こんにちは " + name1);

  ※引数にデフォルト値がある場合は()の省略はできません。

• 処理がreturn文1行しかない場合、returnも省略可

  // 関数リテラル定義
  const hellofunc = name1 => "こんにちは " + name1;
  
  // 関数コール
  console.log(hellofunc("ゴロー＆花"));

  こんにちは ゴロー＆花​