Javascriptの変数のスコープ

Javascriptバリバリの人からすれば、
ものすごく初歩的なことだろうけど、
Javascriptの変数のスコープがやっとわかった。

今まで適当だったんだけど、
この記事を読んで目からウロコだった。

http://www.atmarkit.co.jp/ait/articles/0708/21/news116.html

まとめると

・すべての変数をvarキーワード付きで定義した方がいい
関数外ではvar付きでもvarなしでもグローバル変数になり、
関数内ではvar付きならローカル変数、varなしならグローバル変数になる

関数内でグローバルにすると混乱するので
恐らく余程の事情がない限りやらないほうがいい

・関数内でのローカル変数の定義は頭で行ったほうがいい
実は関数の途中で定義しても頭で定義していることになっており、
これがために変な挙動になりかねないので頭で行うのが推奨

・参照型の変数はメモリの格納場所を指しており
参照渡しになるので注意

以下ソースを参照

var x = [0, 1, 2];

function ref(x) {
  x[0] = 10;
  return x;
}

window.alert(ref(x)); // [10,1,2]
window.alert(x);      // [10,1,2]

・Javascriptの変数はオブジェクトのプロパティのようなもので
現在の関数の中に変数がなければ、外側に変数を探しに行く

これをスコープ・チェーンというらしい

なので以下のソースのような挙動になる。

function myClosure(init) {
  var cnt = init;

  return function() {
    return ++cnt;
  }
}

var result1 = myClosure(1);
var result2 = myClosure(10);

window.alert(result1()); // 2
window.alert(result1()); // 3
window.alert(result2()); // 11
window.alert(result2()); // 12
window.alert(result1()); // 4