【Javascript】即時関数について。「(function(){処理}());」みたいな形

ウェブ制作技術

こんにちは。樋口です。
6月ももうすぐ終わりますね。と同時に2015年も半分が経過しました。
2015年の後半はどんな6ヶ月になるのでしょうか?流行語大賞候補は出てくるのでしょうか?

今回もJavascriptの関数の話題です。前回は定義の話でしたが、今回は「即時関数」という

※「即時関数」という名前は、『JavaScriptパターン -優れたアプリケーションのための作法-』という参考書からの引用です。

JavaScriptパターン -優れたアプリケーションのための作法-

即時関数とは

まずは即時関数の実例を。

即時関数とは、一言で言うと、定義したその場で即実行する関数です。
functionの処理の記述のあとに()があって、なおかつ、全体をかっこで囲んであります。

下記のような書き方も実はよく使われます。

最後の()が、全体を囲むカッコからとび出してます。
これはこれでOKなのですが、『JavaScriptパターン -優れたアプリケーションのための作法-』によると、最初の書き方のほうが推奨されているそうです。

ともあれ、最後の()と全体を囲むカッコ。この2つのカッコに即時関数の特長が凝縮されています。

  • 最後の()・・・その場で関数を実行
  • 全体を囲むカッコ・・・コードをローカルスコープに閉じ込める

順に見ていきましょう。

その場で関数を実行する

即時関数の名前の由来は、その場で関数を実行することです。
実例を見ます。

上記がふつうの関数の使い方です。
定義して、呼び出す。

それに対して、繰り返しになりますが、即時関数は、下記のようになります。

定義と呼び出しが一緒になってます。
なので、関数の名前をつける必要がありません。
すぐに処理して、跡形もなく消えるからです。

引数を渡したり、値を返したり

引数を渡すこともできます。

そして、値を返して変数に代入することもできます。

というわけで、その場限りの、使い捨てのときには即時関数を使うのがいいです。
なぜなら即時関数は、グローバルスコープに不要なものを漏らさないからです。

コードをローカルスコープに閉じ込める

「グローバルスコープに不要なものを漏らさない」というのは、つまり、「ローカルスコープに閉じ込めておく」ということです。

グローバル変数を不用意に使わない

たとえば。

上記のような記述が、何にも包まれず、ぽんと置かれていたら、whoもfeelもbelovedもグローバル変数として残り続けます。
他のjavascriptの記述、jQueryプラグインの読み込みとか、他の人の記述とか、なんでもいいのですが、そこで同じ変数名が使われていたら衝突してしまいます。
これはよくないです。

続いて。

関数でコーティングすることによって、関数内で定義された変数whoとfeelは、関数外部に影響を及ぼしません。上書きもしないし、実行後にグローバルスコープ上に残りもしません。
ですがしかし、関数が代入された、belovedという変数がグローバル変数となってしまいました。
この関数を再利用しないのであれば、これもあまりよろしくないのです。

そこで即時関数の出番です。

こうすることで、ここでグローバル変数となるものは皆無になります。
その場で必要な処理を行い、何も残さず、静かに去っていく。
ある種のダンディズムが感じられますね。


以上、そこはかとなく仕事人のような気配を漂わせる、即時関数の紹介でした。
即時関数みたいにダンディーな男になりたいものです。

あなたのビジネスのWeb戦略を、ぜひキタックにおまかせください。

効果を出すためのサイト運営、集客できるウェブ広告

ブログの更新情報をお知らせしています。