Javascript の変数宣言構文の違い (グローバル変数を含む) 質問する

これらの声明は、

1.var a = 0;

これにより、グローバル変数が作成され、これはグローバルオブジェクトwindowブラウザ（またはglobalThisglobal は ES2020 で追加されました。または、thisグローバル スコープで を介して削除できます。他のプロパティとは異なり、このプロパティは を介し​​て削除できませんdelete。

仕様上、これは識別子バインディングを作成する。オブジェクト環境レコードのために地球環境グローバル オブジェクトは、グローバル環境のオブジェクト環境レコードの識別子バインディングが保持される場所であるため、これはグローバル オブジェクトのプロパティになります。これが、このプロパティが削除不可能な理由です。これは単なるプロパティではなく、識別子バインディングであり、識別子は削除できません。

バインディング (変数) は、コードの最初の行が実行される前に定義されます (var以下の「いつ発生するか」を参照)。

これによって作成されるプロパティは列挙可能です (非常に古い IE8 以前を除く)。

1.1let a = 0;

これは、グローバル オブジェクトのプロパティではないグローバル変数を作成します。これは ES2015 以降の新機能です。

仕様上、これは識別子バインディングを作成する。宣言的環境記録グローバル環境ではなくオブジェクト環境レコードに分割されている点がグローバル環境の特徴です。環境記録1 つはグローバル オブジェクト (オブジェクト環境レコード)に含まれるすべての古い内容用で、もう 1 つはグローバル オブジェクトには含まれず、代わりにグローバル環境の宣言的let環境レコードに含まれるすべての新しい内容 ( 、const、および によって作成された関数) 用です。class

バインディングは、その外側のブロック内のステップバイステップのコードが実行される前に作成されます(この場合は、グローバル コードが実行される前)。ただし、ステップバイステップの実行がステートメントに到達するまで、バインディングにはいかなる方法でもアクセスletできません。実行がステートメントに到達するとlet、変数にアクセスできるようになります (以下の「いつlet、const何が起こるか」を参照してください)。バインディングが作成されてから(スコープに入るとき)、アクセス可能になるまで(コード実行が に到達するまで) の時間は、 Temporal Dead Zonelet [TMZ]と呼ばれます。バインディングがその状態にある間、バインディングからの読み取りやバインディングへの書き込みを試行すると、ランタイム エラーになります。

(バインディングがアクセス可能かどうかを表す仕様用語は「初期化されている」かどうかですが、「初期化されている」という使用法と、ステートメントlet[let a = 10;とlet a;] に初期化子があることを混同しないでください。これらは無関係です。 によって定義された変数は、に到達するとlet a;によって初期化されます。)undefinedlet

1.2const a = 0;

グローバル オブジェクトのプロパティではないグローバル定数を作成します。

バインディングは、値を変更できないことを示すフラグがあることを除けば、バインディング (TMZ などを含む)constとまったく同じです。その意味の 1 つは、 の初期値 (決して変更されない値) を提供するために、初期化子 ( 部分)を用意する必要があるということです。let= valueconst

を使用するとconst、次の 3 つのことが実現します。

1. 定数に代入しようとすると、ランタイム エラーが発生します (ほとんどの IDE では、それよりも積極的にフラグが立てられます)。
2. 他のプログラマーのために、その不変の性質を文書化します。
3. JavaScript エンジンが、 の値が変更されないことを前提に最適化できるようにしますconst(後で書き込まれるかどうかを追跡する必要がなく、つまり、実質的に定数であるかどうかを確認する必要がありません)。

constの値が決して変わらないということは、 が参照するオブジェクトが不変であるという意味ではないことを理解することが重要です。そうではありません。 の値は変更できないため、別のオブジェクトを参照する (またはプリミティブを含む)とconstいうだけです。const

// This is fine:
const x1 = {a: 1};
console.log(x1.a); // 1
x1.a = 2;
//^^^^^^−−− No problem, just changing the object's state, not the value in the `const` (the object reference)
console.log(x1.a); // 2

// This is not:
const x2 = {a: 1};
console.log(x2.a); // 1
x2 = {a: 2};
// ^−−−−−−− Error here ("TypeError: Assignment to constant variable"),
// you can't change the value of a `const`
console.log(x2.a);

window.a = 0;
console.log(`"a" in window? ${"a" in window}`); // "a" in window? true
delete window.a;
console.log(`"a" in window? ${"a" in window}`); // "a" in window? false

try {
    console.log(a);   // undefined
    console.log(b);   // ReferenceError: b is not defined
} catch (e) {
    console.error(e);
}

var a = "ayy";
b = "bee";            // Don't do this, but I didn't want to use `let` or `const` in this example

try {
    console.log(a);   // "ayy"
    console.log(b);   // "bee"
} catch (e) {
    console.error(e);
}

console.log(a); // undefined
var a = 0;
console.log(a); // 0

console.log(a); // ReferenceError: a is not defined
let a = 0;
console.log(a);

let a = 0;          // (Doesn't matter whether this is `let`, `const`, or `var` [or even `class` or `function`])
console.log(a);     // 0
if (true) {
    console.log(a); // ReferenceError: a is not defined
    let a = 1;
    console.log(a);
}

var name = 42;
console.log(name);          // 42 - seems okay, but...
console.log(typeof name);   // ...string?!?!!

// From the ES5 era
(function () {
    var a = 0; // `a` is NOT a property of `window` now

    function example() {
        console.log(a);   // Shows "0", because `example` can access `a`
    }
    
    example();
})();