2015

4

8

JavaScriptの変数の挙動について検証してやんよ!!!(var命令編)

スポンサードリンク


JavaScriptの変数について今更ですが、コードを順番通りに実行させる手続き型の記述では遭遇しなかったのですが・・・
連続的なイベント処理などが必要な処理の際に、変数の思い通りの定義ができない場面が出てきました。
変数を新たに(無駄に)定義させるための関数を作ったりと、複雑なコードを書けば書くほど、そもそも自分の変数の扱い方がなっていないんジャマイカ?

ちゃんと勉強しなおせばまだ助かる・・・まだたすかる・・・
マダガスカル!!! オ~レッ!!!!


JavaScriptの変数宣言について

そもそもJavaScriptの変数について検証を試みた理由として、変数を宣言する際にvar命令が必要とのことですが・・・
実際にはvar宣言がなくても通ってしまう(正確には自動的に定義されてしまうため省略可能)ため
イマイチvar宣言の必須性とvarが無い場合での明確な動作の違いが、そのままグローバル変数とローカル変数のそれぞれの違いの認識も曖昧になっていき、結果的に管理人のスコープやクロージャへの習得の枷になっているのでは?
コレってみんなちゃんと理解できてんの?できてないの自分だけ?
愛は死にますか?心は死にますか?・・・

JavaScriptの変数についてのお約束

var命令を使わずに宣言された変数はすべてグローバル変数と見なす

scope = "tokidoki";

function show(){
	scope = "web";
	return scope;
}

console.log("※1 : " + show()); // ※1 : web
console.log("※2 : " + scope);  // ※2 : web
関数の外でvar命令を使わずに宣言された変数は関数内で同名で宣言された変数に上書きされてしまう(8行目)

ローカル変数を定義するには、必ずvar命令を使用する

scope = "tokidoki";

function show(){
	var scope = "web";
	return scope;
}

console.log("※3 : " + show()); // ※3 : web
console.log("※4 : " + scope);  // ※4 : tokidoki
「関数内でグローバル変数を書き換える」ような用途を除いては、原則としてvar命令を省略すべきではない


var命令の有無と変数の定義場所の変更で検証

検証①-A 関数内でvarを付けて変数を宣言

function test01() {
	var name01 = "yanyo";	//変数nameはこのtest01関数内のみで有効
}
test01();
console.log("name01" + name01); //undefined
結果としては関数内でvarを付けて変数を宣言すると、宣言した関数の外では呼び出せないため”undefined”でエラーとなります

検証①-B var付けずに変数を宣言

function test02() {
	name02 = "yanyo";	//変数宣言時のvarを削除
}
test02();
console.log("name02 = " + name02);	//name02 = yanyo
var命令を使わずに宣言された変数はグローバル変数となるので関数の外で出力された場合でも変数の出力は可能

検証①-C トップレベルでvarを宣言

var name03 = "yanyo";

function test03(){
	console.log("name03 = " + name03); // name03 = yanyo
}
test03();
関数の外、トップレベルではvarを付けても付けなくてもグローバル変数扱いになるので関数を通しても出力は可能

検証①-D 変数の宣言場所を変更

function test04() {
	console.log("name04 = " + name04); // name04 = undefined
	var name04 = "yanyo";
}
test04();
変数の宣言はされているものの、中身は未定義なので、結果は当然”undefined”でエラーとなります


スコープ(変数の有効範囲)

グローバル変数とローカル変数で宣言された変数がどう扱われるのかは上記の検証でだいたい飲み込めました。
では次になぜ関数内で宣言した同名の変数はグローバル変数を見ていることにならないのか?という疑問を検証

検証② 変数を定義して出力

keyword = "yanyo"; // グローバル変数

function funcYanyo() {
	console.log("※1 " + keyword);	// ※1 undefined
	var keyword = "やんよ";  // ローカル変数(関数内だけの変数)
	console.log("※2 " + keyword);	// ※2 やんよ
}

funcYanyo();
これはfuncYanyo関数内で「keyword」変数がvar宣言されているためです。
JavaScriptでは、varで宣言した変数は関数のどこで宣言されていようと常に関数内だけの変数と見なされてしまうのです。
たとえvar宣言の前に変数を参照していても同じです。このためfuncYanyo関数内の最初の変数「keyword」は、グローバル変数の「keyword」ではなく関数内だけの「var keyword」を参照しているためです。

var宣言した変数の有効範囲

関数内にif文のブロックを設けて、その外から出力

function varCheck(x) {
	if(x == 0) {
		var keyword = "yanyo";
	}
	console.log(keyword); // 関数内であればブロックの外でも有効
}

varCheck(0); // yanyo
JavaScriptのvar付きの変数では、有効範囲が「関数内すべて」になるのでif文内のブロック内で宣言されていても、ブロックの外側から参照できてしまうのです。
※Javaで同じようなコードを書くとブロックスコープ外の出力となるためコンパイルエラーです。



ひとまずこれでグローバル変数とローカル変数の認識はカンペキ!
それじゃぁ、皆で。 飯行こ メシイコ! メキシコ!!! そーれっ ここメキシコ♪

トップへ