2021-07-20

JavaScript: varとletの違い（トップレベルでの変数宣言時）

JavaScriptの変数宣言にはvarとletがあります。
varは関数という単位でスコープが決まり、 letはブロックという単位でスコープが決まります。

では、関数内でもブロック内でもなく、 トップレベルで宣言した場合はどうなるのでしょうか？
ここではトップレベルでvarとletを使って変数を宣言した場合、 どのように違うのかを見てみます。

使用するJavaScriptファイルは2つです。

<script src="sample1.js"></script>
<script src="sample2.js"></script>

次のように3つの変数（a, b, c）を「sample1.js」のトップレベルで宣言し、 それぞれの変数を2つのJavaScriptファイルから参照してみます。

var a = "var宣言"
b = "宣言なし"
let c = "let宣言"

console.log(a); // var宣言
console.log(b); // 宣言なし
console.log(c); // let宣言

当然ですが、「sample1.js」からはそれぞれの変数を参照することができます。

では次に、 別ファイルの「sample2.js」から3つの変数を参照してみます。

console.log(a); // var宣言
console.log(b); // 宣言なし
console.log(c); // let宣言

console.log(window.a); // var宣言
console.log(window.b); // 宣言なし
console.log(window.c); // undefined

ポイントは最後の「window.c」が「undefined」になっている所です。

トップレベルで let宣言した変数は、 他のファイル「sample2.js」から参照することはできますが、 グローバルオブジェクトのプロパティ「window.c」としては参照できません。 この点がvar宣言とlet宣言の違いの1つです。

このような違いがあるため、意図的にwindowオブジェクトのプロパティとして グローバル変数を作成したい場合は、varで宣言する必要があります。 そうでなければ let で十分です。