Let、Const、Var の概要: 主な違いの説明

JavaScript で let、const、var の実際の使い方を理解して使用していた時期がありましたが、それを言葉で説明するのは難しかったです。同様の苦境に陥った場合は、スコープ、ホイスティング、再初期化、再割り当ての違いに注目してください。

スコープ:

• var は関数スコープ、または関数の外で宣言された場合はグローバルスコープです。

var を使用した例 (関数とグローバル スコープ)

function varExample() {
    if (true) {
        var x = 10; // x is function-scoped
    }
    console.log(x); // Outputs: 10
}
varExample();

if (true) {
    var y = 20; // y is globally scoped because it's outside a function
}
console.log(y); // Outputs: 20

• let と const はブロック スコープです。つまり、宣言されているブロック ({} で区切られた) 内でのみアクセスできます。

let を使用した例 (ブロックスコープ)

function letExample() {
    if (true) {
        let x = 10; // x is block-scoped
        console.log(x); // Outputs: 10
    }
    console.log(x); // ReferenceError: x is not defined
}
letExample();

if (true) {
    let y = 20; // y is block-scoped
    console.log(y); // Outputs: 20
}
console.log(y); // ReferenceError: y is not defined

const（ブロックスコープ）を使用した例

function constExample() {
    if (true) {
        const x = 10; // x is block-scoped
        console.log(x); // Outputs: 10
    }
    console.log(x); // ReferenceError: x is not defined
}
constExample();

if (true) {
    const y = 20; // y is block-scoped
    console.log(y); // Outputs: 20
}
console.log(y); // ReferenceError: y is not defined

吊り上げ

ホイスティングは、タスクを開始する前にワークスペースをセットアップするようなものです。あなたがキッチンで食事を作る準備をしていると想像してください。料理を始める前に、すべての材料と道具を手の届くところにカウンターの上に置きます。

プログラミングでは、コードを記述するとき、JavaScript エンジンはコードを実際に実行する前にコードを調べ、スコープの最上位にすべての変数と関数を設定します。これは、コード内で宣言する前に関数や変数を使用できることを意味します。

• 3 つ (var、let、const) はすべて実際にホイストされます。ただし、違いはホイスティングプロセス中に初期化される方法にあります。

• var はホイストされ、未定義で初期化されます。
  

console.log(myVar); // Outputs: undefined
var myVar = 10;

• let と const はホイストされますが、初期化されません。これは、ブロックの開始から宣言に遭遇するまで、それらは「一時的なデッド ゾーン」にあることを意味します。

console.log(myLet);
// ReferenceError: Cannot access 'myLet' before initialization
let myLet = 10;

console.log(myConst); 
// ReferenceError: Cannot access 'myConst' before initialization
const myConst = 20;

再割り当てと再初期化:

• var は再初期化 (再度宣言) し、再割り当て (新しい値の割り当て) できます。 ### var を使用した例

var x = 10;
x = 20; // Reassignment
console.log(x); // Outputs: 20

var x = 30; // Reinitialization
console.log(x); // Outputs: 30

• let は同じスコープ内で再初期化することはできませんが、再割り当ては可能です。

let y = 10;
y = 20; // Reassignment
console.log(y); // Outputs: 20

let y = 30; // SyntaxError: Identifier 'y' has already been declared

• const は再割り当てできません。宣言時に初期化する必要があります。ただし、const がオブジェクトまたは配列の場合は、オブジェクトまたは配列の内容 (プロパティまたは要素) を変更できます。 ### const を使用した例

const z = 10;
z = 20; // TypeError: Assignment to constant variable.

const z = 30; // SyntaxError: Identifier 'z' has already been declared

const オブジェクトを使用した例

const obj = { a: 1 };
obj.a = 2; // Allowed, modifies the property
console.log(obj.a); // Outputs: 2

obj = { a: 3 }; // TypeError: Assignment to constant variable.

const 配列を使用した例

const arr = [1, 2, 3];
arr[0] = 4; // Allowed, modifies the element
console.log(arr); // Outputs: [4, 2, 3]

arr = [5, 6, 7]; // TypeError: Assignment to constant variable.

以上がLet、Const、Var の概要: 主な違いの説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。