グローバル変数とローカル変数

　JavaScriptにおける、グローバル変数とローカル変数の簡単な解説です。JavaScriptでは、変数を宣言する場合、varを使い、以下のように記述します。

// a という変数を宣言
var a;

　変数は、宣言が行われた場所によって、グローバル変数とローカル変数とに分けられます。

　関数内で宣言された変数はローカル変数、関数の外側で宣言された変数はグローバル変数となります。また、宣言されずに代入が行われた変数は、関数内外にかかわらずグローバル変数となります。

　グローバル変数とローカル変数の違いは、ローカル変数は、宣言された関数内からしか参照できないという点です。例えば、次の例を見てみましょう。

//関数 myFunc を実行
myFunc();

//変数 a を表示
document.write(a);//これはエラーが発生


function myFunc(){//関数 myFunc
    //変数 a を宣言し、文字列"test"を代入
    var a = "test";

    //変数 a を表示
    document.write(a);
}

　これは間違った記述例です。仕組み的に見れば、まず関数myFuncが実行され、関数内で変数aの宣言と代入、変数aの表示が行われ、次に関数外で変数aを表示する処理が実行されます。では何が間違っているかというと、関数myFuncで宣言された変数aは、ローカル変数であるため、関数myFunc内から変数aを参照することはできても、関数外からは参照することができないからです。実際これを実行するとエラーが発生します。

　では次の例を見てみましょう。この例は、同じ変数名のグローバル変数とローカル変数がある場合、ローカル変数が優先されることと、ローカル変数の値が変わってもグローバル変数の値には影響しないということを示すものです。

//グローバル変数 a を宣言し、10を代入
var a = 10;

//関数 myFunc を実行
myFunc();

//グローバル変数 a を表示
document.write(a);//10が表示される

function myFunc(){//関数 myFunc
    //ローカル変数 a を宣言し、100を代入
    var a = 100;

    //ローカル変数 a を表示
    document.write(a);//100が表示される
}

　こちらの例では、関数外でグローバル変数aが宣言されているためエラーは発生しません。関数myFunc内で宣言された変数aに100を代入しても、グローバル変数aは変化しないので、関数外でdocument.write(a)を実行すると、10が表示されるのです。

　ところで、関数myFunc内ではローカル変数aのほうが優先されるので、グローバル変数aを参照することはできないかのように思えます（ローカル変数aが宣言される前なら話は別ですが）。しかし、次の方法により、グローバル変数を参照することができます。

//グローバル変数 a を宣言し、10を代入
var a = 10;

//関数 myFunc を実行
myFunc();

function myFunc(){//関数 myFunc
    //ローカル変数 a を宣言し、100を代入
    var a = 100;

    //ローカル変数 a を表示
    document.write(a);//100が表示される

    //グローバル変数 a を、ローカル変数 a_G に代入して表示
    var a_G = window.a;
    document.write(a_G);//10が表示される
}

　関数myFunc内からグローバル変数aを呼び出す記述が「window.a」の部分です。これは、グローバル変数はwindowオブジェクトのプロパティされるためです。実に簡単な方法ですね。