JavaScript における Let と Var: スコープと時間的デッド ゾーンの謎を解く

ECMAScript 6 で導入された let ステートメントは開発者の間で混乱を引き起こしました特に、確立された var キーワードとの違いについて説明します。この記事では、これら 2 つの変数宣言の微妙な違いを詳しく掘り下げ、そのスコープ ルールと最適な使用例に焦点を当てます。

スコープ

基本的な違いは、それらのスコープ動作にあります。 var で宣言された変数は、その変数が定義されている関数 (関数スコープ) に制限されますが、let 変数はその変数が含まれるブロック (ブロック スコープ) に制限されます。これは、変数のスコープを非常に狭くして、その直接のブロックの外側で定義された変数と対話できないようにすることを意味します。

例:

function run() {
  var foo = "Foo";
  let bar = "Bar";

  console.log(foo, bar); // "Foo Bar"

  {
    var moo = "Mooo"
    let baz = "Bazz";
    console.log(moo, baz); // "Mooo Bazz"
  }

  console.log(moo); // "Mooo"
  console.log(baz); // ReferenceError
}

run();

上の例では、var 変数 moo はブロックの外でもアクセス可能なままですが、let 変数 baz はブロックの外でアクセスされると ReferenceError をスローします。

Temporalデッド ゾーン

もう 1 つの違いは、時間的デッド ゾーン (TDZ) です。 let 変数の場合、宣言の時点からその変数が定義されているブロックの終わりまで TDZ が存在します。この期間中に初期化せずに let 変数にアクセスすると ReferenceError が発生します。

Example :

function test() {
  console.log(foo); // ReferenceError
  let foo = "Bar";
}

test();

このコードでは、初期化される前に let 変数 foo にアクセスすると、TDZ が原因で ReferenceError が発生します。

Let と Var を使用する場合

一般に、グローバル スコープの汚染を避け、変数名の衝突を防ぐために、ブロック内の変数には let を使用することを好みます。 Var は、複数のブロックまたは関数間でアクセスできる必要がある変数に依然として役立ちます。