2日目 => 即時関数ってなんだ #JavaScript

即時関数というものがあるらしい。

JavaScriptにはブロックスコープというものが無くて、
for文の外でもfor文で宣言した変数が使える。
（でも新しいECMAScriptだとブロックスコープが扱えるようになってるらしいというのをQiitaの他の記事で読んだ気がする）

for(var i = 0; i < 10; i++){
  console.log("i: " + i);
}

console.log("ループ外 i: " + i);

/*
i: 0
i: 1
i: 2
i: 3
i: 4
i: 5
i: 6
i: 7
i: 8
i: 9
ループ外 i: 10
*/

関数の中の変数に外からアクセスは不可。

function roop(){
  for(var i = 0; i < 10; i++){
    console.log("i: " + i);
  }
}

roop();

console.log("ループ外 i: " + i);

// roop関数は残り続ける
// roop();

/*
i: 0
i: 1
i: 2
i: 3
i: 4
i: 5
i: 6
i: 7
i: 8
i: 9
Uncaught ReferenceError: i is not defined
*/

即時関数ってのを使うとこんな感じになるらしい。
一個上のやつだと関数自体はグローバルスコープに残ってしまっていつでも呼び出せる。
これだと実行したら終わりなので、後々使わない関数を定義したりしなくて済むみたい。

(function (){
  for(var i = 0; i < 10; i++){
    console.log("i: " + i);
  }
}());

console.log("ループ外 i: " + i);

/*
i: 0
i: 1
i: 2
i: 3
i: 4
i: 5
i: 6
i: 7
i: 8
i: 9
Uncaught ReferenceError: i is not defined
*/

あとは、オブジェクトを以下のように作ると、
外からアクセスさせたくないnameという変数に外からアクセスできてしまう。

var sample = {
  name: "SAMPLE",
  displayName: function (){
    console.log("私の名前は" + this.name + "です。");
  }
}

sample.displayName();
console.log(sample.name);
sample.name = "JOHN";
sample.displayName();

/*
私の名前はSAMPLEです。
SAMPLE
私の名前はJOHNです。
*/

即時関数を使うと、nameは外からアクセスできない。

var sample = (function (){
  var name = "SAMPLE";

  return {
    displayName: function (){
      console.log("私の名前は" + name + "です。");
    }
  }
}());

sample.displayName();
console.log(sample.name);

/* 
私の名前はSAMPLEです。 
undefined
*/

(function(){}());ってなんだか変な書き方。
function(){}()ってとこは関数実行してるんだなって感じがするけど、
これを囲んでる()は一体なんだ？
function(){}()で実行したらエラーで怒られた。

以下はエラーにならないみたい。

var sample = function(){
  console.log("さんぷる");
}();

やたら括弧を増やしてみてもいけるみたい。

(((function(){
  console.log("sample");
}())) + function(){
  console.log("sample2");
}());

(((((((((((((((((((((((((((((
  function(){console.log("括弧多い");}()
)))))))))))))))))))))))))))));

// これはだめ
(
  console.log("test");
);

// これはOK
(
  console.log("test")
);

// 変数の宣言はダメらしい
(
  var name = "SAMPLE"
)

// ifもだめ
(
  if(true){
    console.log("てすと");
  }
)

// これはOK
(
  document.write("あいうえお")
)

// 括弧だけはダメ
();

// 数字はOK
(1);

括弧何者？

function(){}();
// だと
function(){

}

();
// と解釈されてエラーらしい

括弧で囲むとこいつらは関数と()は別々のものじゃなくて２つで一緒なんだよって解釈されるってこと？
うーむ、わからん。