letとvarの基本的な違い
JavaScriptには、変数を宣言するためのいくつかのキーワードがありますが、その中でも最も一般的に使われるのがletとvarです。これらは似ていますが、重要な違いがあります。
-
スコープ:
varは関数スコープを持つのに対し、letはブロックスコープを持ちます。つまり、varで宣言された変数は、それが宣言された関数のどこからでもアクセスできます。一方、letで宣言された変数は、それが宣言されたブロック（またはそれを含むブロック）の中でのみアクセスできます。 -
再宣言:
varで宣言された変数は、同じスコープ内で再宣言することができます。しかし、letで宣言された変数は、同じスコープ内で再宣言することはできません。 -
初期化前のアクセス:
varで宣言された変数は、宣言前にアクセスするとundefinedが返されます（これを変数の”巻き上げ”と呼びます）。一方、letで宣言された変数には巻き上げが適用されず、宣言前にアクセスするとエラーが発生します。
これらの違いを理解することで、JavaScriptのコードをより効果的に書くことができます。次のセクションでは、これらの違いがforループでどのように振る舞うかを詳しく見ていきましょう。
forループでのletとvarの挙動
JavaScriptのforループ内でのletとvarの挙動は、それらのスコープと巻き上げの違いによります。以下に具体的な例を示します。
for (var i = 0; i < 5; i++) {
setTimeout(function() {
console.log(i);
}, 1000);
}
上記のコードは、1秒後に5を5回出力します。これは、varが関数スコープを持つため、iがforループの各イテレーションで新たに宣言されるのではなく、既存のiが更新されるからです。したがって、setTimeoutが実行される時点でのiの値（つまり5）が出力されます。
一方、同じコードをletを使って書くと、結果は異なります。
for (let i = 0; i < 5; i++) {
setTimeout(function() {
console.log(i);
}, 1000);
}
このコードは、1秒ごとに0から4までの数値を順に出力します。これは、letがブロックスコープを持つため、各イテレーションで新しいiが宣言され、そのiはそのイテレーションのブロック内でのみ有効であるためです。したがって、setTimeoutが実行される時点での各イテレーションのiの値が出力されます。
このように、forループ内でのletとvarの挙動の違いを理解することは、予期しないバグを防ぐために重要です。
letとvarを適切に使うためのヒント
JavaScriptでletとvarを適切に使うためのいくつかのヒントを以下に示します。
-
ブロックスコープが必要な場合は
letを使用する:letはブロックスコープを持つため、if文やforループなどのブロック内で変数を使用する場合はletを使用すると良いでしょう。 -
関数スコープが必要な場合は
varを使用する:varは関数スコープを持つため、関数全体で使用する変数を宣言する場合はvarを使用すると良いでしょう。 -
再宣言を避ける:
varで宣言された変数は同じスコープ内で再宣言できますが、これはバグを引き起こす可能性があります。可能な限りletを使用して、同じ名前の変数が誤って再宣言されるのを防ぎましょう。 -
初期化前のアクセスを避ける:
varで宣言された変数は巻き上げが適用され、宣言前にアクセスするとundefinedが返されます。これも混乱を招く可能性があるため、letを使用して初期化前のアクセスを避けることを推奨します。
これらのヒントを心に留めておくことで、JavaScriptのコードをより効果的に書くことができます。