JavaScript 入門 | 関数 | 変数のスコープ (variable scope)

Tags:

変数のスコープ (variable scope)

JavaScript では、オブジェクトや関数はすべて変数 (variable) である。 変数のスコープ (scope) とは、その変数がアクセスできる変数、オブジェクト、関数の集合を意味する。

JavaScript で変数は、スコープに応じて次のように区分される。

  1. ローカル変数 (local variable)
  2. グローバル変数 (global variable)

ローカル変数 (local variable)

ローカル変数とは、関数内で宣言された変数を指す。
このようなローカル変数は、変数が宣言された関数内でのみ有効であり、関数が終了するとメモリから消える。
関数のパラメーターも、関数内で定義されるローカル変数のように動作する。

function localNum() {
    var num = 10; // ローカル変数 num に数値 10 を代入する。
    document.write("関数内部で変数 num の型は " + typeof num + " である。<br>"); // number
}
localNum();       // 関数 localNum() を呼び出す。
document.write("関数の呼び出しが終わった後、変数 num の型は " + typeof num + " である。"); // undefined

JavaScript では、宣言されていない変数を使用またはアクセスしようとするとエラーが発生する。
しかし、宣言されていない変数に対する typeof 演算子の結果値は undefined を返す。

グローバル変数 (global variable)

グローバル変数とは、関数の外部で宣言された変数を指す。
このようなグローバル変数は、プログラムのどの領域からでもアクセスでき、Web ページが閉じられるまでメモリから消えない。

var num = 10; // グローバル変数 num を宣言する。
function globalNum() {
    document.write("関数内部で変数 num の値は " + num + " である。<br>"); // 10
    num = 20; // グローバル変数 num の値を関数内部で変更する。
}
globalNum();  // 関数 globalNum() を呼び出す。
document.write("関数の呼び出しが終わった後、変数 num の値は " + num + " である。"); // 20

上の例のように、グローバル変数は関数の外部だけでなく内部からもアクセスして変更できる。

JavaScript でローカル変数を宣言するときは、必ず var キーワードを使用して宣言する必要がある。
関数内部で var キーワードを使わずに変数を宣言すると、その変数はローカル変数ではなくグローバル変数として宣言される。

function globalNum() {
    num = 10; // var キーワードを使わずに変数 num を宣言する。
    document.write("関数内部で変数 num の値は " + num + " である。<br>"); // 10
}
globalNum();  // 関数 globalNum() を呼び出す。
document.write("関数の呼び出しが終わった後、変数 num の値は " + num + " である。"); // 10

また、グローバル変数と同じ名前のローカル変数を宣言すると、そのブロックではその名前でローカル変数だけを呼び出すことができる。

var num = 10; // グローバル変数 num を宣言する。
function globalNum() {
    var num = 20; // 同じ名前のローカル変数 num を宣言する。
    document.write("関数内部で変数 num の値は " + num + " である。<br>"); // 20
}
globalNum(); // 関数 globalNum() を呼び出す。
document.write("関数の呼び出しが終わった後、変数 num の値は " + num + " である。"); // 10

上の例のような場合、そのブロックでグローバル変数を呼び出すには、グローバル変数が window オブジェクトのプロパティであることを明示すればよい。

var num = 10; // グローバル変数 num を宣言する。
function globalNum() {
    var num = 20; // 同じ名前のローカル変数 num を宣言する。
    document.write("関数内部でローカル変数 num の値は " + num + " である。<br>");
    document.write("関数内部でグローバル変数 num の値は " + window.num + " である。<br>");
}
globalNum(); // 関数 globalNum() を呼び出す。