JavaScriptの変数宣言はループの内側・外側どちらが正しい？varとletのスコープの違いを徹底解説

JavaScriptにおける変数宣言の位置：ループの内側か外側か？

JavaScript（ECMAScript）では、varを使って宣言された変数は、関数内のどこに記述されていても、自動的に関数の先頭へ「巻き上げ（ホイスティング）」されます。これは、JavaScriptが他の多くのC系言語とは異なり、ブロックスコープではなく関数スコープを採用している言語だからです。

varによる宣言は「巻き上げ」られる

例えば、次のようなコードを見てみましょう。

function() {
    for (var a = 0; a < 7; a++) {
        var b = 100;
    }
}

一見すると変数bはループの内側で宣言されているように見えますが、実際には次のコードと完全に同じ意味になります。

function() {
    var b;
    for (var a = 0; a < 7; a++) {
        b = 100;
    }
}

つまり、varで宣言した変数は、宣言位置に関係なく関数全体で有効になるのです。この挙動を理解していないと、意図しないバグの原因になることがあります。

letの場合はスコープがブロック単位になる

一方、ES2015（ES6）で導入されたletはこの限りではありません。letはレキシカルスコープ（ブロックスコープ）を持つため、宣言されたブロック（{ }の中）内でのみ有効です。

したがって、以下のような特別な理由がない限り、変数はそれを使用するスコープ内で宣言するのが望ましいと言えます。

• ループの外側でも同じ変数を使い回したい場合
• 各反復処理が、前の反復でその変数に対して行った操作の結果に依存している場合

実践的なベストプラクティス

現代のJavaScript開発では、次のポイントを意識すると安全で読みやすいコードになります。

• 再代入しない変数には const を使う：意図しない上書きを防げます。
• let は使用するブロック内で宣言する：変数の有効範囲が明確になり、可読性が向上します。
• var の使用は避ける：巻き上げによる予期せぬ挙動を防ぐため、レガシーコードの保守以外では使わないのが一般的です。

なお、letやconstには「TDZ（Temporal Dead Zone／一時的デッドゾーン）」と呼ばれる仕組みがあり、宣言より前の行でアクセスするとエラーになります。これにより、varの曖昧な巻き上げとは異なり、ミスを早期に検出できるのも大きなメリットです。

まとめると、「原則として変数は使う場所のできるだけ近くで、最小のスコープで宣言する」ことが、バグの少ない堅牢なJavaScriptコードを書くための基本原則です。