JavaScript 的 var、let 和 const

JavaScript 的 var、let 和 const

1. var

var 是最早的變數宣告方式。它有以下特點：

• 函式作用域或全域作用域
• 可以重複宣告
• 存在變數置頂(hoisting)

示例：

console.log(x); // 輸出：undefined（而非報錯）
var x = 5;

function example() {
    var y = 10;
    if (true) {
        var y = 20; // 同一個y
        console.log(y); // 輸出：20
    }
    console.log(y); // 輸出：20
}

example();
console.log(x); // 輸出：5
console.log(y); // 報錯：y is not defined

在這個例子中,第一行 console.log(x) 不會報錯,而是輸出 undefined,這就是變數置頂的效果。

2. let

let 是 ES6 引入的變數宣告方式。特點如下：

• 區塊作用域
• 同一作用域內不可重複宣告
• 不存在變數置頂

示例：

console.log(a); // 報錯：Cannot access 'a' before initialization
let a = 5;

function example() {
    let b = 10;
    if (true) {
        let b = 20; // 新的b,與外層的b不同
        console.log(b); // 輸出：20
    }
    console.log(b); // 輸出：10
}

example();
console.log(a); // 輸出：5
console.log(b); // 報錯：b is not defined

這裡,let 宣告的變數不會被置頂,因此在宣告前使用會導致錯誤。

3. const

const 也是 ES6 引入的,用於宣告常數。特點如下：

• 區塊作用域
• 宣告時必須初始化
• 不能重新賦值,但對於參考型別,其屬性可以修改

示例：

const PI = 3.14159;
PI = 3; // 報錯：Assignment to a constant variable

const user = { name: 'John', age: 30 };
user.age = 31; // 這是允許的
console.log(user); // 輸出：{ name: 'John', age: 31 }

user = { name: 'Jane' }; // 報錯：Assignment to a constant variable

if (true) {
    const PI = 3; // 這是允許的,因為是新的作用域
    console.log(PI); // 輸出：3
}
console.log(PI); // 輸出：3.14159

const 與 let 類似,也不存在變數置頂。

綜合實例：

function scopeExample() {
    console.log(varVariable); // 輸出：undefined（變數置頂）
    // console.log(letVariable); // 如果取消註解,會報錯
    // console.log(constVariable); // 如果取消註解,會報錯

    var varVariable = '我是 var';
    let letVariable = '我是 let';
    const constVariable = '我是 const';

    if (true) {
        var varVariable = '我是新的 var';
        let letVariable = '我是新的 let';
        const constVariable = '我是新的 const';

        console.log(varVariable);  // 輸出：我是新的 var
        console.log(letVariable);  // 輸出：我是新的 let
        console.log(constVariable);  // 輸出：我是新的 const
    }

    console.log(varVariable);  // 輸出：我是新的 var
    console.log(letVariable);  // 輸出：我是 let
    console.log(constVariable);  // 輸出：我是 const

    varVariable = '我可以改變';
    letVariable = '我也可以改變';
    // constVariable = '我不能改變'; // 這會報錯

    console.log(varVariable);  // 輸出：我可以改變
    console.log(letVariable);  // 輸出：我也可以改變
}

scopeExample();

這個綜合實例展示了 var、let 和 const 在作用域、可變性和變數置頂方面的差異。var 的函式作用域和變數置頂特性使其行為不同於 let 和 const。let 和 const 具有區塊作用域,不會被置頂,但 const 宣告的變數不能被重新賦值。