JavaScriptのletは、ES2015(ES6)から導入された変数宣言のキーワードです。
従来のvarに比べてスコープのルールが異なるなど、慣れない方にとっては少し理解しづらい面もあるかもしれません。
しかし、letを使いこなすことは、より保守性の高いJavaScriptのコードを書くために欠かせません。
本記事では、JavaScriptのletについて基本的な使い方から特徴まで、わかりやすく解説していきます。
- 現役のフルスタックエンジニアとして活躍中
- 開発チームリーダーとして複数プロジェクトをリード
- 副業プログラミングスクール講師として数百名以上を指導してきた教育のプロ
- プログラミングスクールのカリキュラム執筆経験あり
JavaScriptのletとは
letはJavaScriptにおける変数宣言の一つで、ブロックスコープのローカル変数を定義します。2015年にES2015(ES6)の仕様として導入され、constと共に登場しました。
ブロックスコープとは、if文やfor文などの中括弧 {} で囲まれた範囲のことを指します。letで宣言された変数は、宣言したブロック内でのみ有効になります。
letの基本的な使い方
letを使った変数宣言の基本的な書き方は次の通りです。
let 変数名;
let 変数名 = 初期値;
// 例
let x;
let y = 10;letの後に変数名を書き、必要に応じて=で初期値を代入します。セミコロン;を忘れずに付けましょう。
varとletの違い
letを理解するには、従来の変数宣言であるvarとの違いを知ることが大切です。主な違いは次の2点です。
スコープのルールが異なる
varは関数スコープですが、letはブロックスコープという点が異なります。つまり、varは関数内であればどこからでもアクセスできるのに対し、letはブロック内でしかアクセスできません。
function example() {
var x = 1;
let y = 2;
if (true) {
var x = 10;
let y = 20;
console.log(x); // 10
console.log(y); // 20
}
console.log(x); // 10
console.log(y); // 2
}上記のコードでは、if文の外で宣言されたxとyの値が、if文内で再宣言されています。varで宣言されたxはif文の外でも値が10になっているのに対し、letで宣言されたyはif文の外では元の値2のままです。
再宣言できない
varは同じ変数を何度でも再宣言できますが、letは同じスコープ内で再宣言するとエラーになります。
var x = 1;
var x = 2; // OK
let y = 1;
let y = 2; // Errorこの性質により、letを使うことで意図しない変数の上書きを防ぐことができます。
一時的なデッドゾーン(TDZ)
letにはもう一つ特徴があります。それが「一時的なデッドゾーン(Temporal Dead Zone, TDZ)」と呼ばれる性質です。
letで宣言された変数は、宣言より前のコードから参照するとエラーになります。これは変数が初期化される前の領域をTDZと呼ぶためです。
console.log(x); // Error
let x = 1;varの場合は宣言より前で参照してもエラーにはならず、undefinedになります。TDZはletやconstの安全性を高める仕組みと言えるでしょう。
constとの違い・使い分け方
letと同じくES2015で導入されたconstは、letとは次の点で異なります。
- constは再代入不可(letは可能)
- constは宣言時に初期値が必須
つまり、constは値を変更できない定数を定義するためのキーワードです。
letとconstの使い分けの基本は、「変更の必要がない変数はconst、変更が必要な変数はlet」とするのがよいでしょう。constを使うことで、値を誤って変更してしまうことを防げます。
まとめ
JavaScriptのletについて、要点をまとめると次のようになります。
- letはブロックスコープのローカル変数を定義する
- varは関数スコープ、letはブロックスコープ
- letは同じスコープ内での再宣言不可
- letは宣言前にアクセスするとエラー(TDZ)
- 値を変更しない変数はconst、変更が必要ならletを使う
varをletやconstに単純に置き換えるのは危険ですが、新しいコードを書く際は積極的にletとconstを使うのがおすすめです。
ブロックスコープとTDZにより、バグを減らせる可能性が高まるでしょう。ぜひletを使いこなして、より良いJavaScriptコードを書いていきましょう！
【補足】letを使う際の注意点
最後に、letを使う上での注意点をいくつか紹介します。
グローバルオブジェクトへのプロパティ追加
varで宣言された変数はグローバルオブジェクト（ブラウザではwindowオブジェクト）のプロパティとして追加されますが、letやconstはグローバルオブジェクトへプロパティを追加しません。
var x = 'グローバル';
let y = 'グローバル';
console.log(window.x); // "グローバル"
console.log(window.y); // undefinedループ内でのlet変数の挙動
for文の()内でlet宣言すると、ループごとに新しい変数が作成されます。これにより、ループ内の非同期処理などで意図しない挙動となる可能性があるので注意しましょう。
for (let i = 0; i < 3; i++) {
setTimeout(() => {
console.log(i);
}, 1000);
}
// 0
// 1
// 2が1秒後に出力されるvarを使った場合は3が3回出力されます。letの場合はループごとに新しいiが作られクロージャーされるため、上記のような結果になります。
switch文のlet
switch文は1つのブロックスコープとみなされるため、caseごとにletを使うと再宣言エラーになります。
switch (x) {
case 0:
let foo;
break;
case 1:
let foo; // Error
break;
}必要であればswitch内にさらにブロックを作ると回避できます。
以上、JavaScriptのletについて詳しく解説してきました。
従来のvarと異なる部分もありますが、より安全で保守性の高いコードを書くためには欠かせない機能だと言えます。
本記事を参考に、ぜひ日々のコーディングの中でletを有効活用していきましょう！
JavaScriptを効率的に身につける勉強法は？
JavaScript には興味があっても、プログラミング学習をはじめたばかりであれば、以下のような疑問を持つかもしれません。
- JavaScript を身に付けてエンジニアになるには何をすればいい？
- 何から勉強すればいいんだろう？
- 効率よく勉強するには？
JavaScriptは学ぶべき内容が非常に多いため、勉強法の選び方を間違うと時間・労力・お金が無駄になってしまいます…。
そのため、こちらの記事を参考に、ご自身に最適な学習方法を選んでみませんか？
