let・constとスコープの全体像

この単元で学ぶこと

• letとconstの再代入可否を区別できる
• ブロックスコープと名前の隠蔽を追える
• 宣言前参照とオブジェクト変更の挙動を説明できる

本文解説

変数名と値の結び付き 「let count = 1;」はcountという名前を作り、値1で初期化します。「count = 2;」は既存の名前への再代入です。宣言と再代入は別の操作で、同じスコープでlet countをもう一度宣言することはできません。let count;のように初期値を省くと、宣言が実行された後の値はundefinedです。

constは結び付きを再代入しない 「const rate = 0.1;」に続いて「rate = 0.2;」を実行するとTypeErrorになります。通常のconst宣言には初期値が必要で「const rate;」は構文エラーです。再代入しない変数にconst、再代入が必要なものにletを使うと、変更の意図が読み取りやすくなります。

ブロックスコープ 波括弧で囲んだブロック内のlet・constはそのブロックの外から参照できません。「{ let total = 3; } console.log(total);」は外側に同名の宣言がなければReferenceErrorです。varは基本的に関数スコープなので、同じブロックだけでは有効範囲が区切られません。

外側の同名変数を隠す 「let n = 1; { let n = 2; console.log(n); } console.log(n);」の表示順は2、1です。内側で新しいnを宣言したので外側のnを書き換えていません。「let」を付けず内側で「n = 2;」とだけ書けば、外側のnへ再代入し、最後も2になります。宣言の有無を見ます。

宣言前参照と一時的デッドゾーン let・constの束縛はスコープの開始から存在しますが、宣言が実行されるまでは初期化されません。この区間が一時的デッドゾーンです。「console.log(x); let x = 1;」はundefinedの表示ではなくReferenceErrorです。「let x=1; { console.log(x); let x=2; }」も内側xの未初期化を参照するためエラーです。

constのオブジェクト 「const user = {score:1}; user.score = 2;」は可能です。constが禁止するのはuserを別の値へ再代入することであり、参照先オブジェクトのプロパティ変更ではありません。「user = {score:2};」はTypeErrorになります。同様にconstで宣言した配列へpushすることも可能です。

ループのスコープ 「for (let i=0; i<3; i++) { console.log(i); }」は0、1、2を表示し、ループ外からこのiは参照できません。またletのforループでは反復ごとの束縛があり、「const f=[]; for(let i=0;i<3;i++){ f.push(()=>i); }」ならf[0]()は0、f[2]()は2です。varでは共有するiを参照するため、ループ後の呼出しは3になります。

読み解き演習 「const items=[]; { let value=2; items.push(value); } console.log(items[0]);」は2を表示します。外側itemsへの再代入はなく、配列の中身を変更しただけです。一方、最後にconsole.log(value)を追加するとブロック外なのでReferenceErrorです。エラーの種類、発生箇所、その後の処理へ進むかを順に追います。

図解

重要ポイント

• letは再代入可、constは再代入不可。
• 両者ともブロックスコープ。
• 宣言前はundefinedではなく未初期化参照エラー。
• constでも参照先オブジェクトの変更は別問題。

間違えやすい点

• constをオブジェクト全体の凍結と解釈しない。
• 宣言前のlet参照をvarと同じと思わない。
• 内側の同名宣言と外側への代入を混同しない。

用語解説

束縛

変数名と値を結び付けて管理する仕組み。

スコープ

名前を参照できる範囲。

一時的デッドゾーン

let・constなどが宣言実行前で未初期化の区間。

シャドーイング

内側の同名宣言が外側の名前を隠すこと。

関連教材

• let・constとスコープのブラウザ挙動/実装演習