(function(){ ... }())は何？
javascriptでプログラムを書くときプログラムの最初に
(functin() {
...
}());
と記載されたプログラムをよく見る。これは即時関数と呼ばれている。
#即時関数を利用する目的
即時関数を利用する目的は変数のスコープを狭くすることである。通常、javascriptでは以下のように変数を定義するとtest.js以外からも参照可能なグローバル変数として扱われる。
test.js
var name = "abc";
即時関数を使用して以下のように定義すればtest.js内の即時関数ブロックの中でしか参照できない変数として変数nameを定義することができる。こうすることに変数のスコープを狭め、別ファイルのスクリプトで変数nameに意図しないデータが混入されることを防ぐことができる。
test.js
(functin() {
var name = "abc";
}());
#ES6以降では即時関数を使う必要はない
ES6以前はjavascirptがグローバルスコープと関数スコープして用意していなかったため、即時関数は保守性を高める上で必要なハックではあった。しかし、ES6ではブロックスコープで変数を定義できるletキーワードが用意されている。letを使用した以下のコードではブロック内でしかその変数は有効にならない。
test.js
{
//nameはこのブロック内でのみ有効
let name = "abc";
}
また先頭（グローバル）でletを使用して宣言してもvarと異なり、そのファイル内でしかその変数は利用できない。
test.js
//nameはtest.js内でのみ有効
let name = "abc";
{
}
即時関数は初見で見た時、知らない人にとってはどうしてもその意味は伝わりずらい。人にとってわかりやすいコードをするためにこれからはletをつかうのが望ましい。
参考情報
即時関数とES6の仕様を踏まえた上で即時関数はどのように考えるべきか丁寧にまとめてられています。
https://qiita.com/raccy/items/310b4353a757296f797f