javascriptの変数のスコープに注意

趣旨

javascriptの変数のスコープはとてもはまりやすいので注意が必要。

とても勉強になりました。
はてなインターン4日目の講義「JavaScript で学ぶ イベントドリブン」
http://d.hatena.ne.jp/hatenatech/20100805/1281005759

変数のスコープに注目

functionの途中でvar宣言した場合

変数「foo」の動きに注目です。

var foo=1;
alert("no1:"+foo);

(function(){
  alert("no2:"+foo);
  var foo=2;
  alert("no3:"+foo);
})();

alert("no4:"+foo);

実行結果

no1:1
no2:undefined
no3:2
no4:1

functionの途中でvar宣言をすると、functionの先頭で変数が未定義変数として定義されるので、no2の値がundefinedとなる。

functionでvar宣言しなかった場合

no2とno4の動きに注目。

var foo=1;
alert("no1:"+foo);

(function(){
  alert("no2:"+foo);
 // var foo=2;
  foo=2;
  alert("no3:"+foo);
})();

alert("no4:"+foo);

実行結果

no1:1
no2:1
no3:2
no4:2

変数の宣言をするかしないかで、変数の値が変わってくる。