変数の有効範囲を知る

2015年10月29日

変数のスコープとは

個々の変数には、その変数が使える範囲が定まっています。そのことを、変数のスコープと言います。

例えば、関数内で宣言した変数のスコープは、その関数の内部だけです。ということは、その変数は関数の内部でしか使うことができません。そのような変数のことをローカル変数と言います。それに対して、関数の外部で宣言した変数は、プログラム全体で利用できます。そのような変数をグローバル変数と言います。

ローカル変数とグローバル変数の違いを理解できていないと、変数の値を気づかぬうちに変更してしまうことがあります。
サンプルコードの実行結果はこちら

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>ローカル変数とグローバル変数</title>

<script>
function testFunc(){
    var num;//←ローカル変数
    num = 5;
}
</script>
</head>
<body>
    
<script>
var num = 10;
    testFunc();
    document.write( num ,"<br>");
</script>
</body>
</html>

<!doctype html>

<html>

<head>

<title>ローカル変数とグローバル変数</title>

function testFunc(){

var num;//←ローカル変数

num = 5;

}

</script>

</head>

<body>

var num = 10;

testFunc();

document.write( num ,"<br>");

</script>

</body>

</html>

グローバル変数とローカル変数の優先順位

関数の内部でグローバル変数と同じ名前のローカル変数を宣言すると、ローカル変数の方が優先されます。言い方をかえると、同じ名前のグローバル変数は、関数の内部では見えなくなります。なので、関数内で変数numに値を代入しても、グローバル変数のnumの値は変化しません。

ちなみに、ローカル変数numの宣言をコメントアウトした場合、ローカル変数numが作成されないため、関数内部でグローバル変数numが見えるようになります。この状態で「num = 5」と代入すると、グローバル変数numに値が代入されます。