3.3 var の挙動と関数スコープによる問題点
従来の JavaScript では、変数宣言に var キーワードのみが使われてきました。以前の「JavaScript 入門」でもコーディングにおいて var で変数宣言する記述が多くあったと思います。
しかし、var には現代の開発においては不都合な「スコープが広すぎる」という性質があり、モダンな JavaScript コーディングにおいて var は使用されなくなっている傾向にあります。
関数スコープ
var で宣言された変数は、「関数スコープ」を持ちます。これは、「関数の中か外か」だけを区別し、if 文や for文などのブロック（{ }）による範囲を無視してしまう性質です。
var 変数名;
例えば、if 文のブロックの中で var を使って変数を宣言しても、その変数は if 文が終わった後も消滅せず、その関数が終わるまで有効に残ってしまいます。また、もし関数の外（トップレベル）のブロック内で var を宣言した場合、ブロックは無視されるため、結果としてどこからでもアクセスできる「グローバルスコープ」になってしまいます。
3.3.1 var で宣言された変数が if ブロックを無視するプログラム
var で変数を宣言し、if ブロック外に出ても var の値が取得できることを確認してみましょう。
ソースフォルダ：public/ch03
ファイル名：function-scope.js
➢ function-scope.html
前項で作った ch03/scope.html をコピーし、ch03 にペーストしてください。
その際に、ファイル名をfunction-scope.html に変更します。
ファイル内の scope.html や scope.js の記述も、function-scope.html や function-scope.js に修正します。
➢ function-scope.js
// function-scope.js
function exampleVar() {
if (true) {
var x = 10; // varは「関数スコープ」を持つ
}
// 本来、if文が終われば消えるべきですが...
alert("ifブロックの外から var x を確認: " + x); // OK: 10（使えてしまう）
}
exampleVar();
実行結果
解説
このプログラムでは、if 文のブロック（{ }）の中で変数 x を宣言しています。
Java などの他の言語であれば、if 文が終わった瞬間に x は消滅します。しかし、var は if 文のブロックを無視するため、8 行目の関数の終わりまで x が有効に残って 10 が表示されてしまいます。
8: alert("if ブロックの外から var x を確認: " + x); // OK: 10（使えてしまう）