無名関数と即時関数について

無名関数や即時関数は何となく知っていたのですが、使う意味や具体的な使い方があまりよく分かっていなかったので調べてみました。

通常の関数

通常関数は以下のように記述します。

JavaScript

function oregairu(name) {
	alert(name + 'さん やっはろー！');
};
oregairu('雪ノ下');

1～3行目で関数を定義して、4行目で関数を実行しています。
通常の関数のデモページ
　

無名関数

上で書いた関数は、以下のように記述することもできます。

var oregairu = function oregairu(name) {
	alert(name + 'さん やっはろー！');
};
oregairu('雪ノ下');

変数に定義した関数を代入している形です。
さらに関数名は省略可能なので、以下のように記述することもできます。

JavaScript

var oregairu = function(name) {
	alert(name + 'さん やっはろー！');
};
oregairu('雪ノ下');

この記述方法を無名関数と呼びます。
無名関数のデモページ
　

即時関数

関数の定義と実行をセットにする場合、以下のように記述できます。

JavaScript

(function(name) {
	alert(name + 'さん やっはろー！');
})('雪ノ下');

この記述方法を即時関数と呼びます。
即時関数のデモページ
　

即時関数のメリット

例えば、以下のような記述があったとします。

JavaScript

var result = '',
greeting = 'やっはろー！',

// 一時的な変数
name1 = '雪ノ下',
name2 = '由比ヶ浜';

result = name1 + 'さん、' + name2 + 'さん ' + greeting;
alert(result);

即時関数のメリットのデモページ1
name1,name2が一時的に使用した変数とします。
小規模な場合はそれほど問題ないですが、コードが長くなってくるとグローバル変数もどんどん増えてきます。

一時的に使用したグローバル変数がそれ以前に使用されていた場合、値を上書きしてしまうことになるので、場合によっては意図しない挙動となる可能性もあります。

これらの問題を回避するのが、即時関数を使用する方法です。

JavaScript

var result = '',
greeting = 'やっはろー！';

(function() {
	var name1 = '雪ノ下',
	name2 = '由比ヶ浜';

	alert(name1 + 'さん、' + name2 + 'さん ' + greeting);
})();

即時関数のメリットのデモページ2
即時関数内で一時的な変数を使用することで、関数外にあるグローバル変数に影響が出ないようにできます。
　

【参考サイト】

• 【JavaScript】無名関数と即時関数？関数パターンを理解してメンテナブルなソースに！ | unitopi – ユニトピ –
• JavaScriptで即時関数を使う理由 – Qiita
• 即時関数のメリットと主な用途｜もっこりJavaScript｜ANALOGIC（アナロジック）
• JavaScript の即時関数パターンはどんなときに使うのか？ – ほくそ笑む