JavaScriptの即時関数の便利な使い方のいくつかをメモ

今まで使ってはいたが、こんな使い方もあるのかと感動したのでメモ。
※そんなの当たり前じゃい！って内容だと思いますので、どうぞスルーしてくださーい

以下使い方例の一覧！

名前を強制させる

jQueryとかprototype（もう使われることはないかな…）とか、いろんなライブラリを使うと名前がバッティングすることってありますよね。 この2つだと変数$。

でも即時関数を使えば関数内部では名前を強制できるので解決！（厳密には、関数内部では引数で渡されたものが優先される）

(function($) {
    $('#target').on('click', function() {
        // ここでの$はjQueryを指す
    })
})(jQuery)

参照不可な変数を作れる

以下の例だとhoge, countはどこからも参照ができない。ただし、countについてはイベントリスナーをセットした際のクロージャから参照ができるため、clickイベントのたびにインクリメントしてコンソールに出力される。（これってどんな場面で使うのだろうか…）

(function() {
    var hoge = 'hoge'
    var count = 0

    document.addEventListener('click', function() {
        console.info(++count);
    }, false)
})()

オブジェクトの作成ができる

以下の例では、return文でオブジェクトを返すことでAPPというオブジェクトの中身をセットしている。 別途コンストラクタを用意し、newをする必要がないので自分はこの書き方は好き。

var APP = (function() {
    var _hoge = ''
    var _fuga = {}

    // 何らかの処理

    return {
        piyo: '',
        funcA: function(a) {
            // 何らかの処理
        },
        funcB: function(b) {
            // 何らかの処理
        }
    }
})()

ブラウザ・デバイス判定

ブラウザやデバイスを判定する際に一時的にuserAgentを変数に保持する事があるが、これは別にグローバルに持つ必要がない。 そんなときにも即時関数は使える。

// 今回はブラウザ判定
var browser = (function() {
   var _ua = navigator.userAgent

   if (_ua.indexOf('Edge') > 0) return 'Edge'
   else if (_ua.indexOf('Chrome')  > 0) return 'Google Chrome'
   else if (_ua.indexOf('Safari')  > 0) return 'Safari'
   else if (_ua.indexOf('Firefox') > 0) return 'Firefox'
   else if (_ua.indexOf('.NET')    > 0) return 'Internet Explorer'
})()

この_uaは外からは参照できない。（上記の例だと_hoge, _fuga）

余談

EdgeのuserAgentを確認すると、何故か

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0 Safari/537.36 Edge/13.10586

などのように別のブラウザの文字列も混じっている…
はっきり言って邪魔なのだが(´・ω・｀)