【JavaScript】即時関数ってなんだ

JavaScriptってJavaやC系言語の経験があればなんとかなると思ってごまかしごまかしやってきていたけれど、即時関数なるものに遭遇し無事死亡。
しばらくググってなんとなくは理解できたのでメモ。

即時関数

(function() {
// 処理
}());

↑こんなやつ

いろんな使い方はあるみたいだけど、同名の変数がある場合に競合しないようにスコープを制御する使い方が一般的らしい。

例えば

function hoge(){
  console.log("関数１を実行しました");
}
function hoge(){
  console.log("関数２を実行しました"); //こっちが実行される
}
hoge();

このように関数名が重複している場合は後の関数だけが実行される。

そこで即時関数を使用すれば同名関数があった場合も全て実行させることができる。

//即時関数１
(function() {
  function hoge() {
    console.log('関数１を実行しました');
  }
  hoge();
}());
//即時関数２
(function() {
  function hoge() {
    console.log('関数２を実行しました');
  }
  hoge();
}());

なら変数名変えればいいじゃんって話だけど、他の人が作ったJavaScriptファイルを同じHTMLで読み込んだ場合に変数名が被ることとかあるかもしれないしね。

引数を持たせる場合

(function (param1, param2) {
    // 処理
}('hoge', 'fuga'));

返り値を持たせる場合

var result = (function (param1, param2) {
    return param1 + param2;
}(1, 2));

即時関数に名前を付ける場合

(function hoge(count) {
console.log('hogeを実行しました ')
setTimeout(function () {
hoge(count);
}, 1000);
}())

参考サイト様
JavaScriptで即時関数を使う理由

JavaScriptの即時関数とは何か。意味やメリット、引数の使い方についてまとめてみた。 | ゴトーのブログ