【JavaScript入門】再宣言

このページで解説している内容は、以下の YouTube 動画の解説で見ることができます。

再宣言

　JavaScript で let キーワードを使って変数を宣言するとき、同じスコープ（同じ階層）で再度同じ変数名を宣言するとエラーになります。これを「再宣言」と呼びます。再宣言が起きるとプログラムが止まってしまうので、スコープの仕組みを理解しながら変数を管理することが大切です。ただし、スコープが異なる下の階層で同名の変数を宣言する分には問題ありません。

１．再宣言とは

　同じ階層で、すでに let などで宣言された変数と同じ名前で宣言することを「再宣言」といい、JavaScript のルールでは禁止されています。

if (条件式) {
    let fruit;   
    // 同じブロック内(同じ階層)で再び let fruit; を書くとエラー
}

このように、同じ { } の中で重複して宣言するとエラーが発生し、コードが正しく動きません。

２．階層が違う場合

　しかし、入れ子になった下の階層（スコープ）で同名の変数を宣言するのはエラーになりません。その場合、下の階層では新しく宣言された変数が使われ、上の階層で宣言された変数は影響されません。

if (条件式) {
    let fruit = 'リンゴ';

    if (条件式) {
        let fruit = 'バナナ';
        // 上の階層の変数とは別物
    }
}

３．サンプルコード

　ファイル名を「redeclareCheckSample.html」として、以下のコードを実行してください。入れ子の if 文を使ってスコープが入れ子になる状況を確認します。

【redeclareCheckSample.html】

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>redeclareCheckSample.html</title>
</head>
<body>
  <h1>再宣言の例（別のプログラム）</h1>
  <p>ブラウザの開発者ツール(コンソール)を開いて結果を確認してください。</p>

  <script>
    let isWeekend = true;

    if (isWeekend) {
      // 階層1で tool を宣言
      let tool = 'ノートパソコン';
      console.log('階層1:', tool);

      if (isWeekend) {
        // 階層2で同じ名前の変数を宣言（スコープが異なるのでエラーにはならない）
        let tool = 'ゲーミングPC';
        console.log('  階層2:', tool);

        if (isWeekend) {
          console.log('    階層3:', tool);
        }

        console.log('  階層2:', tool);
      }

      console.log('階層1:', tool);

      // 以下のように同じ階層(階層1)で再度 let tool を宣言するとエラー
      // let tool = 'エラーになります';
    }
  </script>
</body>
</html>

実行結果

デバッグコンソールの出力

階層1: ノートパソコン
  階層2: ゲーミングPC
    階層3: ゲーミングPC
  階層2: ゲーミングPC
階層1: ノートパソコン

上記コードをブラウザで開き、コンソールを確認すると、次のようなログが表示されます。

階層1 では tool は「ノートパソコン」
階層2 では同名の tool に「ゲーミングPC」が入る
階層3 では階層2の変数 tool を参照

　下のスコープで同名の変数を再宣言することは可能ですが、同じ階層内で再宣言するとエラーが発生する点に注意してください。

まとめ

同じブロック（同じ { } 内）や関数内で同名の変数を let で再宣言するとエラーになり、プログラムが停止してしまいます。
一方、入れ子になった下のスコープ（階層）で同名の変数を宣言する場合はエラーになりません。上位階層とは別の変数として扱われます。
再宣言のエラーを防ぐには、どこで変数を宣言し、どの範囲（スコープ）まで有効なのかを常に意識することが大切です。

　このようなルールを理解しておくと、大規模なプログラムや複数人で開発するときも、変数の重複や意図しない不具合を防ぎやすくなります。