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 はホイストされ、unknown で初期化されます。
  

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.