【忘備録】Javascript の関数定義の4つの方法

はじめに

今までVue.jsとRuby on rails ばかり触ってきてJavascriptの文法を忘れかけてきたので、railsアプリケーションを作る傍、並行して復習していこうかと思います。
今回はJavascriptの関数定義の方法です。

(1) function命令

javascript.js

function getTriangle(base,height){
  return base * height / 2 ;
};

最も基本的な関数の定義。
コードを解析・コンパイルするタイミングで関数を登録している為、呼び出し後に記述してもエラーにならず正常に処理してくれる。

※後述の関数リテラル、functionコンストラクターはコンパイル時に登録はしない。呼び出し時に評価される為、呼び出し元より先に定義する必要がある。

例）

javascript.js

console.log(getTriangle(5,2));
// => 5

function getTriangle(base,height){
  return base * height / 2 ;
};

(2) functionコンストラクター経由で定義

javascript.js

var getTriangle = new Function ( 'base','height', 'return base * height / 2' );
};

functionコンストラクターを利用して定義する方法。
function命令に比べて、クォートで囲わないといけなかったりする為、余計なコーディングミスをしやすい。
特別な理由がない限り、使うメリットはほぼ無し。
※ functionコンストラクターは引数や関数自体を文字列として定義出来るメリットはあるが、個人的にあまり使いたくないかも。

(3) 関数リテラル

javascript.js

var getTriangle = function(base,height){
  return base * height / 2 ;
}

Javascriptにおいて関数はデータ型の一種であるという特徴を利用して、
名前のない関数function(base,height){　return base * height / 2 ;}を変数に格納している。

(4) アロー関数

javascript.js

let getTriangle = (base,height) => {
  return base * height / 2 ;
}

Javascriptにおいて関数はデータ型の一種であるという特徴を利用して、
名前のない関数function(base,height){　return base * height / 2 ;}を変数に格納している。

最後に

久しぶりにJavascript勉強したら、どんな感じで定義してたっけ？となってしまったのでやはり少しずつでも定期的に勉強しないと無駄になりそうで怖い、、、
後でVueも復習しないと、、、