変数のスコープとは、変数の有効範囲のこと。JavaScriptの変数のスコープには、グローバルスコープとローカルスコープがある。ブロックスコープはない。
- グローバルスコープ
グローバル変数のスコープ（有効範囲）。
グローバル変数とは、関数の外部で定義した変数、もしくは、関数の内部で
varを使わずに定義した変数。グローバル変数は、関数の内部でも外部でも、プログラム全体で呼び出せる。
- ローカルスコープ
ローカル変数のスコープ（有効範囲）。
ローカル変数とは、関数の仮引数に指定した変数、もしくは、関数の内部で
varを使い定義した変数。ローカル変数は、変数を定義した関数の内部でのみ呼び出せる。
グローバルスコープ
関数の外部で定義した変数、もしくは、関数の内部でvarを使わずに定義した変数（グローバル変数）のスコープ（有効範囲）。
グローバル変数は、関数の内部でも外部でも、プログラム全体で呼び出せる。
グローバル変数を定義
関数の外部で定義する。
関数の外部で定義（１）
<script type="text/javascript">
sampleVar = 'グローバル変数'; // グローバル変数を定義
</script>
sampleVar = 'グローバル変数'; // グローバル変数を定義
</script>
関数の外部で定義（２）
<script type="text/javascript">
var sampleVar = 'グローバル変数'; // グローバル変数を定義
</script>
var sampleVar = 'グローバル変数'; // グローバル変数を定義
</script>
関数の内部で定義
関数の内部で、varを使わずに変数を定義すると、グローバル変数となる。
<script type="text/javascript">
function sampleFunc() {
sampleVar = 'グローバル変数'; // グローバル変数を定義
}
</script>
function sampleFunc() {
sampleVar = 'グローバル変数'; // グローバル変数を定義
}
</script>
ローカルスコープ
関数の仮引数に指定した変数、もしくは、関数の内部でvarを使い定義した変数（ローカル変数）のスコープ（有効範囲）。
ローカル変数は、変数を定義した関数の内部でのみ呼び出せる。
ローカル変数を定義
関数の内部で定義
関数の内部で、varを使って変数を定義すると、ローカル変数となる。
<script type="text/javascript">
function sampleFunc() {
var sampleVar = 'ローカル変数'; // ローカル変数を定義
}
</script>
function sampleFunc() {
var sampleVar = 'ローカル変数'; // ローカル変数を定義
}
</script>
関数の仮引数
<script type="text/javascript">
function sampleFunc( sampleVarA, sampleVarB ) {
// ローカル変数「sampleVarA」の値は、「サンプルＡ」となる。
// ローカル変数「sampleVarB」の値は、「サンプルＢ」となる。
}
sampleFunc( "サンプルＡ", "サンプルＢ" );
</script>
function sampleFunc( sampleVarA, sampleVarB ) {
// ローカル変数「sampleVarA」の値は、「サンプルＡ」となる。
// ローカル変数「sampleVarB」の値は、「サンプルＢ」となる。
}
sampleFunc( "サンプルＡ", "サンプルＢ" );
</script>
サンプル
サンプルのソースコード
<script type="text/javascript">
var sampleVarA = 'グローバル変数Ａ'; // グローバル変数を定義
function sampleFunction() {
var sampleVarA = 'ローカル変数'; // ローカル変数を定義
sampleVarB = 'グローバル変数Ｂ'; // グローバル変数を定義
document . write( "<p>【関数内部から呼び出し】</p>" );
document . write( "<p>sampleVarA: " );
document . write( sampleVarA );
document . write( "</p>" );
document . write( "<p>sampleVarB: " );
document . write( sampleVarB );
document . write( "</p>" );
}
sampleFunction();
document . write( "<p>【関数外部から呼び出し】</p>" );
document . write( "<p>sampleVarA: " );
document . write( sampleVarA );
document . write( "</p>" );
document . write( "<p>sampleVarB: " );
document . write( sampleVarB );
document . write( "</p>" );
</script>
var sampleVarA = 'グローバル変数Ａ'; // グローバル変数を定義
function sampleFunction() {
var sampleVarA = 'ローカル変数'; // ローカル変数を定義
sampleVarB = 'グローバル変数Ｂ'; // グローバル変数を定義
document . write( "<p>【関数内部から呼び出し】</p>" );
document . write( "<p>sampleVarA: " );
document . write( sampleVarA );
document . write( "</p>" );
document . write( "<p>sampleVarB: " );
document . write( sampleVarB );
document . write( "</p>" );
}
sampleFunction();
document . write( "<p>【関数外部から呼び出し】</p>" );
document . write( "<p>sampleVarA: " );
document . write( sampleVarA );
document . write( "</p>" );
document . write( "<p>sampleVarB: " );
document . write( sampleVarB );
document . write( "</p>" );
</script>