JavaScript：通常関数・無名関数・アロー関数・即時関数
JavaScript の通常関数・無名関数・アロー関数・即時関数の違いを調べました。
概要
- 通常関数より無名関数を使う方がよい
- アロー関数は、無名関数の一部（集合記号で表すと、アロー関数 ⊂ 無名関数）
- 通常関数・無名関数・アロー関数全てに、即時関数がある
1. 検証プログラムのひな型
Prog.1 検証プログラムのひな型
<!DOCTYPE html>
<html lang ="ja">
<head>
<meta charset = "utf-8">
</head>
<body>
<script>
alert(pow(2));
function pow(x){
return x*x;
}
</script>
</body>
</html>
Prog.1 は、「検証プログラムのひな型」です。
Prog.1 の、8行目～11行目までを、入れ替えることで、各種関数（通常・無名・アロー・即時）を検証します。
2. 通常関数・無名関数・アロー関数
2.1. 通常関数
通常関数は、JavaScript で最初に学習する関数です。
通常関数の定義と実行は、以下の形式です。
- 関数定義：function 関数名（仮引数）｛処理内容｝
- 関数実行：関数名（実引数）
Prog.2 通常関数
alert(pow(2)); // 関数実行、実引数：2
function pow(x){ // 関数定義、仮引数：x
return x*x;
}
2.2. 無名関数
function の後に、関数名がないので、無名関数と呼ばれています。
関数名が無い代わりに、変数（関数名変数）を使って、関数を実行します。
無名関数の定義と実行は、以下の形式です。
- 関数定義：var 関数名変数 = function（仮引数）｛処理内容｝
- 関数実行：関数名変数（実引数）
Prog.3 無名関数
var pow = function(x){
return x*x;
}
alert(pow(2));
2.3. アロー関数
無名関数から、アロー関数にするには、以下のステップとなります。
- 「function」を削除
- 仮引数後の閉括弧「 ）」の後ろに、矢印「 => 」を付ける
アロー関数の定義と実行は、以下の形式です。
- 関数定義：var 関数名変数 = （仮引数）=>｛処理内容｝
- 関数実行：関数名変数（実引数）
Prog.4 アロー関数
var pow = (x) => {
return x*x;
}
alert(pow(2));
3. 即時関数
通常関数・無名関数・アロー関数全て、即時関数にできます。
各関数（通常・無名・アロー）を即時関数にするには、原則、以下の形式にします。
- 各関数の即時関数：（各関数の関数定義）（実引数）
例えば、通常関数の即時関数は、以下となります。
- 通常関数の即時関数：（通常関数の関数定義）（実引数）
以下で、各関数について、具体的に見ていきます。
3.1. 通常関数
通常関数を、上で述べた通りに、即時関数にすると、以下となります。
- 即時関数：（function 関数名（仮引数）｛処理内容｝）（実引数）
Prog.5 通常関数の即時関数
alert(
(function pow(x) {return x*x;})(2)
);
3.2. 無名関数
無名関数の場合、そのまま即時関数にすると、以下となります。
- 即時関数：（var 関数名変数 = function（仮引数）｛処理内容｝）（実引数）
これだと、「var って、何ですか」といった内容のエラーになります。
そこで、var を削除すると、以下となり、検証プログラムは正常動作します。
- 即時関数：（関数名変数 = function（仮引数）｛処理内容｝）（実引数）
ただ、上式を見ると、明らかに、「関数名変数」はいらなそうです。
（ここだけで使用し、どこからも呼ばれないので、関数名変数はいらない！）
関数名変数を削除すると、最終的に以下となります。
- 即時関数：（function（仮引数）｛処理内容｝）（実引数）
Prog.6 無名関数の即時関数
alert(
(function(x){return x*x;})(2)
);
3.3. アロー関数
アロー関数の場合、そのまま即時関数にすると、以下となります。
- 即時関数：（var 関数名変数 = （仮引数）=>｛処理内容｝）（実引数）
これだと、「var って、何ですか」といった内容のエラーになります。
そこで、var を削除すると、以下となり、検証プログラムは正常動作します。
- 即時関数：（関数名変数 = （仮引数）=>｛処理内容｝）（実引数））
ただ、上式を見ると、明らかに、「関数名変数」はいらなそうです。
（ここだけで使用し、どこからも呼ばれないので、関数名変数はいらない！）
関数名変数を削除すると、最終的に以下となります。
- 即時関数：（（仮引数）=>｛処理内容｝）（実引数）
Prog.6 アロー関数の即時関数1
alert(
((x) => {return x*x;})(2)
);
Prog.6 は、Prog.7 まで、単純化できます。
Prog.7 アロー関数の即時関数2
alert( (x => x*x)(2) );
参考HP
- cly7796.net：無名関数と即時関数について:cly7796.net
- GitHubGist：akkey247/main.js：【Node.js】いろんな関数の書き方
- Qiita：【JavaScript】アロー関数式を学ぶついでにthisも復習する話
