謎のjavascript、『(function (){})();』

---

　

アチコチのサイトのソースを覗き見しまくって、『(function (){hoge;hoge;})();』みたいな関数定義がしてあるjavascriptを色々な所で発見。なにこれ？

序文：function

私の知っているfunctionの使い方は二つ。

• function aaar() {hoge;hoge;}  
• var bbb = function(c, d, d) {hoge;hoge;}

みたいな感じで 変数に関数を定義して後から呼び出す方法。
しかしこの『(function (){hoge;hoge;})();』ってのは、、、

1. なんで変数を定義しないの？
2. なんでコレで作動するの？
3. ドコで呼び出しているの？
4. 前と後ろ、二つ()があるのは何なの？

いやもう、謎だらけ。
私はjavascriptに関してはかなりの素人です。

サイト内のアチコチに自作javascriptを書いたりしてますが、その全てが「他所のサイトで利用されているモノ」、「Tipサイトで紹介されているモノ」、「フリーで配布しているモノ」を組み合わせて殆ど山勘で「多分ココを弄れば自分の好みに変わるだろう」とカスタマイズしたものばかりです。

今回は何がどうなっているのかサッパリ解らず、マネしてみたいものの、完全にお手上げ状態でした。

プログラムの正体は「無名関数」、そして「クロージャ」

上記の様な変数定義をしていない関数を、無名関数と呼び、「関数の中で利用する関数」として使うんだそうです。

で、さらに「関数の中で使う」「クロージャ」ってモノがあるらしいです。
（↑これ後日訂正した文章。当初このページは、無名関数とクロージャをかなり混同して記載していました。クロージャについては、この下で紹介しているリンクを参照のこと）

関数の名前さえ解ってしまえば後は何とかなります（＾_＾;

ほぼ素人でもよく解る解説サイト

[JavaScript]　猿でもわかるクロージャ超入門　１　問題 - DQNEO起業日記
6ページに渡って、凄く丁寧に解説されてます。
ここを読むとクロージャの仕組みや作り方が解るだけでなく「なぜクロージャが便利なのか」まで解りました。クロージャを使った関数は、複数回呼び出したときに、以前の状態を保持しているんですね。

で、無名関数を使わなくても、関数内で別の関数を定義すればこの「状態の保持」は出来るみたい。なるほどなるほど。

上記が解った上で、以下のサイト
(function(){})() と function(){}() - IT戦記
これを読むと「なんで前後に()をくっつけているか」が解って来る。

で、さらに
第ニ章 JavaScript関数の基本を知る
恐らく基本中の基本が書いてあるんだろうけど、ようやく内容が理解できるようになって来た。

あとがき

今まで「オブジェクト指向」って言葉の意味とか、「何が便利なのか」とか、サッパリ解らなかったけど、今日ようやくその一部が理解できた感じ。

 JavaScriptの知識がレベルアップしてきたぞぉ。