JavaScript 中有三種方式聲明變量：var、let 和 const。其中，var 是早期版本的 JavaScript 中的標準，但隨著 ECMAScript 6（ES6）引入了 let 和 const，var 的種種問題也顯現出來。今天，我們將探討為什么你應該避免使用 var，而優先選擇 const 和 let。

var 的問題

1. 作用域問題

var 的最大問題之一是作用域是 函數作用域，而不是 塊級作用域。這意味著，在 if 或 for 這樣的代碼塊內使用 var 聲明的變量，仍然可以在整個函數內訪問。

舉個例子：

function test() {if (true) {var name = 'John';}console.log(name);  // 'John'
}
test();

盡管 name 變量是在 if 語句內部聲明的，但由于 var 的作用域是整個函數，所以 name 在 if 語句外部也能訪問。

2. 變量提升

var 聲明的變量會被“提升”到函數或全局作用域的頂部，這會導致一些難以察覺的錯誤。

function test() {console.log(age);  // undefined，而不是報錯var age = 26;
}
test();

這里，雖然你期望 age 在聲明前不可訪問，但實際上它被提升到了函數頂部，只是沒有值而已，導致打印的是 undefined。

3. 多次聲明不會報錯

你可以在同一作用域內多次使用 var 聲明相同的變量，JavaScript 也不會報錯。

var age = 30;
var age = 40;  // 沒有錯誤
console.log(age);  // 40

這種行為可能會導致不可預測的結果。

let 和 const 的優勢

1. 塊級作用域

let 和 const 解決了 var 作用域的問題，它們都使用 塊級作用域。這意味著它們的作用域僅限于它們被聲明的代碼塊。

if (true) {let name = 'Alice';console.log(name);  // 'Alice'
}
console.log(name);  // ReferenceError: name is not defined

在這個例子中，name 僅在 if 語句塊內部可用，外部無法訪問。

2. 避免提升和暫時性死區

let 和 const 不會像 var 那樣被提升，它們會進入 暫時性死區（TDZ），即在聲明之前訪問會拋出錯誤。

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

3. 常量值

const 用來聲明常量，一旦賦值就不能修改。這對避免意外修改變量值非常有用。

const age = 30;
age = 40;  // TypeError: Assignment to constant variable.

何時使用 let 和 const？

• const 優先：如果變量的值不會改變，使用 const。它可以幫助你清晰地表達意圖，同時避免了修改的錯誤。
• let：只有當你知道變量的值將來會發生變化時，才使用 let。

for 循環中的使用

在 for 循環中，let 和 var 的行為大不相同。使用 let，每次迭代都會創建一個新的作用域，避免了 var 的問題。

// 使用 var
for (var i = 0; i < 5; ++i) {setTimeout(() => console.log(i), 0);
}
// 輸出 5, 5, 5, 5, 5// 使用 let
for (let i = 0; i < 5; ++i) {setTimeout(() => console.log(i), 0);
}
// 輸出 0, 1, 2, 3, 4

總結

• 避免使用 var：var 具有不直觀的作用域和提升機制，容易引發錯誤。
• 優先使用 const：當變量值不會改變時，使用 const，它能清晰表達你的意圖并避免修改錯誤。
• 使用 let：當變量值需要改變時，使用 let，它提供了塊級作用域。