コアJavaScript(ECMAScript)の図書室 27冊目【JavaScript】[ECMAScript] 変数のスコープ

トップページ
特集PC技術
コアJavaScript(ECMAScript)の図書室
27冊目【JavaScript】[ECMAScript] 変数のスコープ

コアJavaScript(ECMAScript)の図書室

27冊目【JavaScript】[ECMAScript] 変数のスコープ

変数のスコープとはどの場所から参照することができるかどうかのことです。
C言語やJava言語などを学習してあると引っかかりやすい点もあります。

[1] 変数のスコープは主に２種類ある

スコープには主にグローバルスコープとローカルスコープがあります。
グローバルスコープを持つ変数をグローバル変数といい、ローカルスコープを持つ変数をローカル変数といいます。
グローバル変数とローカル変数の違いは次の項目より説明をします。

[2] グローバル変数(var宣言しない)

グローバル変数とはグローバルスコープにより参照できる変数のことです。
グローバルとはプログラム全体から参照できることをさします。
var宣言をせずに変数を作成すればグローバル変数になります。

str = "PC特集技術";

function scope_output(){
	// 上に記述した変数と同じところを参照している
	str = "どんとこいPC情報";
	return str
}

document.writeln(str);

// 値が書き換わる
document.writeln(scope_output());

// 値は書き換わったまま
document.writeln(str);

2回目の出力は関数外に作成した変数の値を書き換えています。
3回目の出力は値を書き換えた値が出力されます。

[3] ローカル変数(var宣言する)

ローカル変数とはローカルスコープにより参照できる変数のことです。
ローカルとは特定の場所からのみ参照できることをさします。
一般的には関数内などです。
var宣言をして変数を作成すればローカル変数になります。


var str = "PC特集技術";

function scope_output(){
	var str = "どんとこいPC情報";
	return str
}

// 関数外の変数を参照している
document.writeln(str);

// 関数内の変数を参照している
document.writeln(scope_output());

// 関数外の変数を参照している
document.writeln(str);

グローバル変数の動作を比較すれば、違いがよくわかると思います。
1回目と3回目の出力は関数外に作成してある変数を参照していますが、
2回目の出力は関数内の変数を参照しています。

[4] 引数のスコープはデータ型により違う

引数のスコープとは関数で渡した変数に関するスコープです。
関数の基礎でも説明しましたが、データ型によって異なります。

var number = 100;
var array = [1,2,4,6];

function sum(number){
	return number *2;
}

function data_insert(array){
	array.push(10);
	return array;
}

// 基本型の場合
document.writeln(number);
document.writeln(sum(number));
document.writeln(number);

// 参照型の場合
document.writeln(array);
document.writeln(data_insert(array));
document.writeln(array);

[5] ブロックのスコープは存在しない

ブロックのスコープとは大括弧({})で囲まれたプログラムのスコープです
JavaScriptにおいて、ブロックのスコープは存在しません。
Java言語を学んだ人にはちょっと紛らわしい動作をします。以下のプログラムを見てください。

// Javaと動作が異なるので注意する
for(var i = 0; i <= 10; i++){
	document.writeln(i);
}
document.writeln("ここで変数iを表示してもエラーにならない"+i);

JavaScriptの変数はどこでも宣言をすることが可能です。
上記のプログラムでは、for文内に変数宣言をしていますが、for文を抜けた後でも変数は有効です。
JavaScriptの変数には{}内だけ有効という変数はありません。
勘違いする可能性もあるので、for文内で宣言するのはあまりいい方法とは思えません。
これ以外にも、もう１つ紛らわしいスコープがあります。

// 変数の宣言位置に注意する
function output(){
	// 変数strが宣言される前に表示してみると?
	document.writeln(str);
	var str = "PC特集技術";
	document.writeln(str);
}
output();

変数のスコープはどこで宣言しても最初に宣言したようにみなします。
JavaScriptの変数は、静的なスコープです。つまり定義時のスコープを参照しています。
スクリプト言語なので、逐次解析して実行しているのかと思いきや、このような現象が起こります。
関数内で宣言した場合それが、途中であっても既に宣言されているようにみなされます。
もし、var宣言された変数を記述しなかったときにはエラーになりますのでお間違えのないように。
動作などに余計な不具合を招きかねないので、変数は関数の先頭で宣言しておいたほうが無難です