変数のスコープ - web-0127のブログ

スコープとは

変数には、スコープ（有効範囲）が設定されています
スコープは、その変数がスクリプト中のどこからどこまでの範囲で利用できるかを表します

《JavaScriptのスコープ》

種類	説明	対象
グローバルスコープ	スクリプト全体で変数を参照できる	・関数の外側で宣言した変数・宣言を省略した変数
ローカルスコープ	ある関数の中でのみ変数を参照できる	・関数の内側で宣言した変数・関数の引数

※グローバル変数：グローバルスコープの変数
※ローカル変数：ローカルスコープの変数

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>グローバル変数の利用</title>
<script>
  function func() {
    str = 'ABC';
    console.log( str );
  }
  func();
  console.log( str );
</script>
</head>
<body>
</body>
</html>

《実行結果》

変数strの宣言を省略しているため、グローバル変数として扱われます
グローバル変数はどこからでも参照できるため、関数の内側と外側のどちらからでも問題なく変数の値が出力されます

《ローカル変数の利用》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ローカル変数の利用</title>
<script>
  function func() {
    var str = 'ABC';
    console.log( str );
  }
  func();
  console.log( str );
</script>
</head>
<body>
</body>
</html>

《実行結果》

実行をするとエラーが発生します
「変数strが定義されていない」といった内容が表示されるはずです
関数の内側で変数宣言を行うことで、その変数は関数内でのみ有効なローカル変数となります
よって、関数の外側から変数strの値を出力しようとしても、その名前の変数は見つからないという結果になります

スコープの注意点と使い分け

《異なるスコープの同名の変数》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>異なるスコープの同名の変数</title>
<script>
  var str = 'グローバル';
  function func1() {
    var str = 'func1';
    console.log( str );
  }
  function func2() {
    var str = 'func2';
    console.log( str );
  }
  func1();
  func2();
  console.log( str );
</script>
</head>
<body>
</body>
</html>

《実行結果》

グローバルスコープと、func1のローカルスコープ、func2のローカルスコープにそれぞれstrという名前の変数が存在しています
名前が同じであってもスコープが異なる場合は、まったく別の変数として扱われます
つまり３つのstrは、すべて異なる変数であるということになります
両スコープに同盟の変数がある場合は、ローカル変数のほうが優先されます
ローカル変数は関数が呼び出される

《グローバル変数の値の変移》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>グローバル変数の値の変移</title>
<script>
  var global = 0;
  function func() {
    global++;
  }
  for(var i=0; i < 10; i++) {
    func();
  }
  console.log( global );
</script>
</head>
<body>
</body>
</html>

《実行結果》

func関数内で変数globalをインクリメントしています
グローバル変数の値は保持され続けるので、func関数が呼び出されるたびに変数globalの値が増えていきます
10回呼び出されます

基本的にはローカル変数を利用します。
複数のJavaScriptファイルを読み込んだ際に変数名が衝突し、互いのスクリプトに影響を与えてしまう可能性があるため、好ましくありません。

変数には有効範囲（スコープ）があり、その範囲内でのみ扱うことができる
変数の宣言方法によってスコープが決定される