スコープとホイスティング ― 変数が見える範囲

導入

変数は「どこからでも見える」わけではありません。宣言した場所によって**見える範囲（スコープ）**が決まります。let / const は { }（ブロック）の中だけで有効です。

説明

{ } の中で let / const を宣言すると、その変数はブロックの外からは見えません。

let total = 0;
if (true) {
  let x = 10;        // この { } の中だけで有効
  total = total + x;
}
console.log(total);  // 10
// console.log(x);   // ← ここで x を使うとエラー（ブロックの外だから）

同じ名前でも、ブロックの内と外は別の変数として扱われます。

let name = "外";
{
  let name = "中";     // 別物。外の name は影響を受けない
  console.log(name);   // 中
}
console.log(name);     // 外

var は昔の書き方で、ブロックを無視して関数全体に広がってしまう（ホイスティングという巻き上げ挙動）ため、バグのもとになります。現代のコードでは let / const だけを使うのが鉄則です。

// 悪い例（var はブロックを無視する）
if (true) {
  var leaked = "漏れる";
}
console.log(leaked);  // "漏れる" ← ブロックの外なのに見えてしまう

「変数はできるだけ狭いスコープに閉じ込める」——これが読みやすく壊れにくいコードの基本です。

やってみよう

{ } を追加して変数を閉じ込めたり、外側と同じ名前の変数を中で宣言して、値が独立していることを確かめましょう。

演習

let count = 1; を宣言し、続けてブロック { } の中で let count = 99; と宣言してください。ブロックの外の count を表示し、1 のまま変わらないことを確かめましょう。