東京都府中市、九段下のWEB制作会社Maromaroのブログです

2019.06.17

Sasaki

jQuery/Javascript 無名関数を使って変数を閉じ込めよう

今回は無名関数についてです!
ちょっと分かっていると便利かもな内容です。
早速ですが、下記のような記述みたことありませんか?

この無名関数を使うと、中に宣言した変数が外に漏れ出すのを防ぐことができます。

(function(){
 var txt = "I am a dog."
 $('#test').html(txt);
})();

注目してもらいたいのは

(function(){
})();

この部分です。 これを無名関数といいます! 通常は下記のようにしますが、「test」の部分をなくすことで、無名関数となります。

function test(){
}

下記の部分は何かというと・・・

(無名関数)();

無名関数を即時実行しているのです。

ちなみに、無名関数ではありませんが、下記のように実行するのと一緒です。

var test = function(){
 var txt = "I am a dog."
 $('#test').html(txt);
}

test(); //これでも動く
(test)();//これでも動く

この無名関数を使ってJSを記述することで、自分の書いた変数が外に漏れ出すことを防げるのです! どういうシチュエーションで必要かというと。 例えば、色々なプラグインを読み込んでいる状況や、他者が作ったJSなどが入り乱れている中に、スポットで自身のJSを記述する場合に有効です。

以上、佐々木でした!