JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptはブロックスコープ（block scope）に対応している？let・const・varの違いを実例付きで解説

JavaScriptとブロックスコープの関係

JavaScriptでは、let または const キーワードを使って宣言された変数に対してのみ、ブロックスコープが適用されます。

一方で、var キーワードで宣言された変数は関数スコープには従いますが、ブロックスコープには従いません。つまり、波括弧 { } で囲まれたブロックの中で var を使って変数を宣言しても、その変数はブロックの外側からでもアクセスできてしまいます。

let・const と var のスコープの違い

  • let / const： ブロック単位でスコープが生成されるため、ブロックの外部からは参照できません。
  • var： 関数単位でスコープが生成されるため、同じ関数内であればブロックの外部からでも参照できます。

この挙動の違いにより、let で宣言した変数にブロック外からアクセスしようとすると ReferenceError が発生します。

ブロックスコープを確認できるサンプルコード

以下のコードでは、let と var それぞれで変数を宣言し、ブロックの外からアクセスしたときの挙動の違いを確認できます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   .result {
      font-size: 20px;
      font-weight: 500;
      color: blueviolet;
   }
</style>
</head>
<body>
<h1>Block scope JavaScript</h1>
<div class="result"></div>
<br />
<button class="Btn">Click Here</button>
<h3>上のボタンをクリックすると、var と let で宣言した変数にアクセスします</h3>
<script>
   let resEle = document.querySelector(".result");
   let BtnEle = document.querySelector(".Btn");{
      let a = 22;
   }
   {
      var b = 44;
   }
   BtnEle.addEventListener("click", () => {
      try {
         resEle.innerHTML = a;
      } catch (err) {
         resEle.innerHTML = err + "<br>";
      }
      resEle.innerHTML += "var b = " + b;
   });
</script>
</body>
</html>

実行結果

画面を表示すると、次のようなページが現れます。

JavaScriptはブロックスコープ（block scope）に対応している？let・const・varの違いを実例付きで解説

「Click Here」ボタンをクリックすると、以下のように表示されます。

JavaScriptはブロックスコープ（block scope）に対応している？let・const・varの違いを実例付きで解説

結果の解説

ボタンをクリックすると、let で宣言した変数 a へのアクセス時にエラー（ReferenceError）が発生し、そのエラーメッセージが画面に表示されます。これは、a がブロックスコープ内でのみ有効なためです。

一方、var で宣言した変数 b はブロックの外からでも正常に値（44）へアクセスできます。このことから、var にはブロックスコープが存在しないことが確認できます。

  1. JavaScriptのブロックスコープとは？letとconstによる変数のスコープをわかりやすく解説

    ブロックスコープとは、2つの波括弧 { } で囲まれた領域のことを指します。この領域は、ループ処理、if文、switch文などの内部に存在します。 ES2015（ES6）で導入された let と const を使うことで、そのブロック内でのみアクセスできる「ブロックスコープ変数」を作成できます。従来の var は関数スコープであり、ブロックの外からでもアクセスできてしまうため、意図しないバグの原因になることがありました。let や const を使えば、変数の有効範囲を明確に制限できます。 ブロックスコープの特徴 ブロック外からのアクセス不可： ブロック内で宣言した変数は、ブロックの外から参

  2. MySQLはテーブルの継承をサポートしている？外部キー制約による代替方法を解説

    MySQLにおけるテーブル継承の扱い結論から言うと、MySQLはテーブルの継承（インヘリタンス）をサポートしていません。PostgreSQLなど一部のデータベースにはテーブル継承機能が存在しますが、MySQLでは代わりに外部キー制約（FOREIGN KEY制約）を使用することで、親子関係のようなテーブル間の関連性を実現するのが一般的です。ここでは、実際に親テーブルと子テーブルを作成し、外部キー制約で両者を関連付ける具体的な手順を紹介します。1. 親テーブルの作成まず、親となるテーブルを作成します。以下のクエリを実行してください。mysql> create table Parent_Tab