JavaScript変数宣言の種類と違い

【Copilotの答えの始め】

 

JavaScriptには、3つの主要な変数宣言方法があります。それぞれの宣言方法には異なる特性と用途があります。以下に、その違いを説明します。

1. var

  • 概要: 古くから使用されている変数宣言方法。

  • スコープ: 関数スコープ。ブロックスコープを持たないため、関数内どこからでもアクセス可能。

  • ホイスティング: 変数の宣言が巻き上げられるため、宣言前に使用可能。ただし、未初期化の場合はundefinedとなる。

1
2
3
4
5
6
 
function example() {
    console.log(x); // undefined
    var x = 10;
    console.log(x); // 10
}
example();

2. let

  • 概要: ES6（ECMAScript 2015）で導入された変数宣言方法。

  • スコープ: ブロックスコープ。{}で囲まれたブロック内でのみ有効。

  • ホイスティング: 宣言前にアクセスするとエラーとなる（Temporal Dead Zoneが適用）。

1
2
3
4
5
6
 
function example() {
    console.log(x); // ReferenceError: x is not defined
    let x = 10;
    console.log(x); // 10
}
example();

3. const

  • 概要: 変更不可能な（再代入不可）変数を宣言する方法。ES6で導入。

  • スコープ: ブロックスコープ。{}で囲まれたブロック内でのみ有効。

  • ホイスティング: 宣言前にアクセスするとエラーとなる（Temporal Dead Zoneが適用）。

  • 再代入: 再代入不可。ただし、オブジェクトや配列のプロパティは変更可能。

1
2
3
4
5
6
 
function example() {
    const x = 10;
    console.log(x); // 10
    x = 20; // TypeError: Assignment to constant variable.
}
example();

まとめ

  • var: 関数スコープ、ホイスティングあり、再宣言可能。

  • let: ブロックスコープ、ホイスティングあり（TDZ適用）、再宣言不可。

  • const: ブロックスコープ、ホイスティングあり（TDZ適用）、再宣言不可、再代入不可（ただしオブジェクトのプロパティは変更可能）。

この違いを理解して、適切な場面で適切な変数宣言方法を選択することが重要です。

 

【Copilotの答えの終わり】

 

ホイスティング、TDZについて、

 

【Copilotの答えの始め】

ホイスティング（Hoisting）

ホイスティングとは、JavaScriptのデフォルトの動作で、変数や関数の宣言がそのスコープの先頭に「巻き上げられる」現象を指します。具体的には、コードが実行される前に、変数や関数の宣言がそのスコープの先頭に移動されるように振る舞います。ただし、変数の初期化はホイスティングされません。

Temporal Dead Zone（TDZ）

Temporal Dead Zone（TDZ）とは、letやconstで宣言された変数が初期化されるまでの期間を指します。この期間中にその変数にアクセスすると、リファレンスエラー（ReferenceError）が発生します。TDZは、変数の宣言がスコープの先頭にホイスティングされるものの、実際に初期化されるまでアクセスできないために発生します。

 

【Copilotの答えの終わり】

 

 

 

 

夏の海透くや底へと利尻へと