無名関数の書き方と役割【JavaScript初心者向け】

2019年8月10日

この記事ではJavaScriptの無名関数の書き方と役割について書きます。

無名関数は関数名を宣言しなくていいから便利らしいです。

しかし「関数名を書くくらい大した労力ではないのでは？」と思ってモヤモヤしていたので調べてみました。

・最初に結論（無名関数の役割）

関数名がかぶる危険を回避できる。

関数の書き方

・普通の関数の書き方

//関数定義
function sum(a,b) {
var result = a + b;
return result;
}
//関数呼び出し
sum(1,2);

//関数定義

function sum(a,b) {

var result = a + b;

return result;

}

//関数呼び出し

sum(1,2);

関数sumを定義しています。

sum(1,2);で関数を呼び出し、戻り値は３です。

・無名関数の書き方

//関数定義＆変数に代入
var sum = function (a, b) {
var result = a + b;
return result;
};
//関数呼び出し
sum(1, 2);

//関数定義＆変数に代入

var sum = function (a, b) {

var result = a + b;

return result;

};

//関数呼び出し

sum(1, 2);

変数sumに関数を代入しています。

呼び出しは　変数名();　です。

関数名はありません。

ぱら

あれ？これって関数名を宣言しない代わりに変数名を宣言しているから、あまり意味がないんじゃ？

関数名も変数名も宣言せずに関数を使う方法があります！

ぽれ

・関数名も変数名もいらない書き方（コールバック関数）

//setTimeoutメソッドの引数に無名関数
setTimeout(function() {
alert("10秒経過");
},10000);

//setTimeoutメソッドの引数に無名関数

setTimeout(function() {

alert("10秒経過");

},10000);

これはsetTimeoutの引数に無名関数が入っています。

setTimeout(無名関数,10000); ということです。

これなら引数に入っている無名関数は、関数名も変数名も必要ありません。

ぱら

なるほど！

関数名・変数名を減らせるメリットとは？

大規模開発では複数の人が同時に開発をするため、関数名・変数名がかぶってしまう可能性があります。

そのため、なるべくグローバルの関数名・変数名が少ない方が安全に開発できます。

無名関数なら関数名の衝突を気にすることなく、自由に関数を使うことができるため素晴らしいということです。

参考リンク

分かりそうで分からない、でも分かった気になるIT用語辞典

https://wa3.i-3-i.info/word15754.html

ウェブプログラミングポータル

https://wp-p.info/tpl_rep.php?cat=js-intermediate&fl=r10

Subterranean Flower Blog

https://sbfl.net/blog/2019/02/08/javascript-callback-func/