JavaScriptのlet：いつから使える？
JavaScriptで変数を宣言する場合、従来はvarを使用していました。しかし、varにはいくつかの問題点があり、それらを解決するためにES6 (ECMAScript 2015) でletとconstが導入されました。この記事では、letがいつから使えるようになったのか、varと比べてどのような利点があるのかについて解説します。
letの登場
letは、2015年6月にECMAScript 6 (ES6) が正式に標準化された際に、constと共に導入されました。これは、JavaScriptの進化における大きな転換点となり、よりモダンで安全なコードを書くための新しい方法を提供しました。
letとvarの違い
letとvarの主な違いは、変数のスコープと巻き上げの動作です。
スコープ
| 特徴 | var | let |
|---|---|---|
| スコープ | 関数スコープ | ブロックスコープ |
| 再宣言 | 可能 | 不可能 |
- 関数スコープ:
varで宣言された変数は、宣言された関数内のどこからでもアクセスできます。関数の外からはアクセスできません。 - ブロックスコープ:
letで宣言された変数は、宣言されたブロック ({}で囲まれた範囲) 内でのみアクセスできます。ブロックの外からはアクセスできません。
巻き上げ
- varの巻き上げ:
varで宣言された変数は、コードの実行前に宣言部分のみが関数スコープの先頭に移動されます。これを「巻き上げ」と呼びます。そのため、宣言前に変数を参照してもエラーにはなりませんが、値はundefinedになります。 - letの巻き上げ:
letで宣言された変数も巻き上げられますが、「Temporal Dead Zone (TDZ)」と呼ばれる、宣言前のアクセスが禁止される期間が存在します。TDZ内では変数にアクセスしようとするとReferenceErrorが発生します。
letを使うメリット
letを使用するメリットは、主に以下の点が挙げられます。
- ブロックスコープにより変数のスコープを限定できるため、意図しない変数の上書きや参照を防ぎ、コードの可読性や保守性を向上させることができます。
- TDZにより、変数の宣言前にアクセスしてしまうミスを防止し、コードの安全性を高めることができます。
HTMLコード例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>letの例</title>
</head>
<body>
<script>
// varの例
for (var i = 0; i < 3; i++) {
console.log(i); // 0, 1, 2
}
console.log(i); // 3 (ループの外からもアクセス可能)
// letの例
for (let j = 0; j < 3; j++) {
console.log(j); // 0, 1, 2
}
// console.log(j); // ReferenceError: j is not defined (ループの外からはアクセスできない)
</script>
</body>
</html>
参考文献
関連QA
Q1: すべてのブラウザでletは使えますか？
A1: IE11より前のブラウザではletはサポートされていません。そのため、古いブラウザをサポートする必要がある場合は、Babelなどのトランスパイラを使用する必要があります。
Q2: いつvarの代わりにletを使うべきですか？
A2: 基本的には常にletを使用することをお勧めします。varは古いコードとの互換性を保つために残されていますが、新しいコードではletを使用することで、より安全で可読性の高いコードを書くことができます。
Q3: constとは何ですか？
A3: constもletと同様にES6で導入された変数宣言のキーワードです。constは定数を宣言するために使用され、一度値を代入すると変更することができません。
その他の参考記事:JavaScript文字列テンプレート