よく使用する関数の定義方法と、各定義方法での違いについてまとめました。
目次
関数の定義方法
1. function関数
2. 匿名関数
3. アロー関数（ES2015）
以下では、単純に足し算を行う関数を、それぞれの方法で定義しています。
1. function関数
お馴染みの書き方です。
|
1 2 3 4 |
function add(a, b){ return a + b; } console.log('1 + 2 = ' + add(1,2)); |
2. 匿名関数（無名関数）
こちらもお馴染みの書き方です。
|
1 2 3 4 |
var add = function(a, b){ return a + b; } console.log('1 + 2 = ' + add(1,2)); |
3. アロー関数
こちらは、ES2015（ES6）で追加された記法です。
最近のブラウザは対応しているみたいです。（ES6 compatibility table）
ただ、古いブラウザは対応していないものもあるので、使用する際には実行環境を確認した方がいいかもしれません。
書式
(引数1,引数2,・・・) => { 処理を記載 }
|
1 2 |
let add = (a, b) => a + b; console.log('1 + 2 = ' + add(1,2)); |
この例では、処理の括弧 { } が省略されています。
アロー関数では、次のルールで、引数の括弧と、処理の括弧を省略することができます。
引数が１つの場合、引数を括る括弧を省略できます。（但し、引数がない場合は、省略できません）
処理が１文の場合、処理の括る括弧を省略できます。（上記の例がこちらになります）
引数が１つの場合は、以下のように記述することができます。
|
1 2 |
let showMsg = msg => console.log(msg); showMsg('メッセージを表示します。'); |
4. function関数 と 匿名関数の違い
function関数 と 匿名関数 では、評価されるタイミングが異なります。
評価されるタイミング
・function関数 は、コンパイルするタイミングで関数が評価・登録されます。
・匿名関数は、実行時に関数が評価されます。
と、これだけだと分かりにくいですね。
例えば、function関数では、次のように関数の定義前に、使用してもエラーにはなりません。
|
1 2 3 4 |
console.log('1 + 2 = ' + add(1,2)); // エラーにならない function add(a, b){ return a + b; } |
これは、コンパイル時点でadd関数が評価・登録されるためです。
匿名関数は、実行時に関数が評価されるため、次のように関数定義前に使用するとエラーになります。
|
1 2 3 4 |
console.log('1 + 2 = ' + add(1,2)); // エラーになる var add = function(a, b){ return a + b; } |
5. まとめ
function関数、匿名関数、アロー関数についてまとめました。
function関数と匿名関数については、古いブラウザにも対応しているので、実行環境を気にせず使用できます。
但し、匿名関数については、関数を使用する場所と、関数定義する場所に気をつける必要があります。
アロー関数については、古いブラウザでは対応していないものもあるので、実行環境を考慮する必要があります。