変数には、その変数を呼び出すことのできる範囲が存在します。その範囲のことを、スコープ（有効範囲）と呼び、変数はそのスコープの概念によって「ローカル変数」と「グローバル変数」とに分かれます。
変数が、ローカル変数かグローバル変数のどちらになるのかは、基本的に、変数を宣言する位置、もしくはその宣言方法（varによる宣言か）によって決まってきます。
スポンサーリンク
まず変数を宣言する位置による違いから説明します。
例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script> var title = 'こころ'; //グローバル変数 function getTitle(){ var title = '三四郎'; //ローカル変数 document.write(title); } getTitle(); //三四郎 document.write(title); //こころ </script> |
上記の例では3行目と6行目において、var による宣言によって、同じtitleという名前の変数が宣言されています。
関数の外で宣言されている方がグローバル変数で、関数の中で宣言されている方がローカル変数となります。グローバル変数のスコープはscript内全体となり、ローカル変数のスコープは関数内のみとなります。
よって、10行目のgetNameで表示される結果は、6行目のローカル変数の値である「三四郎」となります。11行目の結果は、script内全体で呼び出すことのできるグローバル変数の値「こころ」となります。
グローバル変数の値はページが再度読み込まれるまで保持され、ローカル変数の値は関数が呼び出されるたびに初期化されます。
また、ES2015（ES6）環境以前のJavaScriptにおいては、CやJavaにあるような { } で囲まれた範囲によるブロックスコープは存在しませんのでご注意を。
関連ページ
変数および定数の宣言（let／const）[ES2015（ES6）]
次に、上記のコードの6行目において、varを省略してみます。
例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script> var title = 'こころ'; //グローバル変数 function getTitle(){ title = '三四郎'; //グローバル変数 document.write(title); } getTitle(); //三四郎 document.write(title); //三四郎 </script> |
すると、今度は11行目の結果も三四郎に変わります。
これは、変数の宣言においてvarを利用しない変数のスコープは、関数内で宣言されたとしても、常にグローバル変数となることから生じます。
よって、3行目で宣言したtitle変数の値は、10行目のgetTitle関数の実行において、こころから三四郎に置き換わってしまいます。
基本的に、変数の衝突を防ぐためにも、またより分かりやすいコードを記述するためにも、グローバル変数の多様は避け、変数の宣言時には常にvarを付けたほうが良いでしょう。
