三者比較表

Scope（作用域）—— 最重要的差異
var 是 function scope，意思是它只被「函式」包住，跑出 {} 也不會消失：

if (true) {
  var x = 10;
  let y = 20;
  const z = 30;
}

console.log(x); // 10 ✅ var 跑出去了
console.log(y); // ReferenceError ❌ let 被 {} 擋住
console.log(z); // ReferenceError ❌ const 被 {} 擋住

這個特性在 for 迴圈裡最容易踩坑：

// var 的陷阱
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}
// 輸出：3, 3, 3  ← 全是 3，因為 i 是共用的

// let 正確行為
for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}
// 輸出：0, 1, 2  ✅ 每次迴圈都是獨立的 i

Hoisting（提升）—— var 的詭異行為
JavaScript 執行前會先「掃描」所有宣告，把它們提升到頂部。但三者行為不同：

console.log(a); // undefined（不報錯，但值不見了）
console.log(b); // ReferenceError ← TDZ 保護你
console.log(c); // ReferenceError ← TDZ 保護你

var a = 1;
let b = 2;
const c = 3;

let 和 const 雖然也有 hoisting，但進入一個 暫時性死區（Temporal Dead Zone，TDZ），在宣告前使用會直接報錯，反而是一種保護機制。var 則靜悄悄地給你一個 undefined，讓你難以察覺 bug。

const 的細節——「不可重新賦值」≠「完全不能改」
const 防止的是重新賦值（rebinding），但如果值是物件或陣列，裡面的內容還是可以改：

const user = { name: 'Yazhu', age: 30 };

user.age = 31;     // ✅ 可以改屬性
user = {};         // ❌ 不行，不能重新賦值整個物件

const arr = [1, 2, 3];
arr.push(4);       // ✅ 可以，[1, 2, 3, 4]
arr = [5, 6];      // ❌ 不行

這個概念很像：const 是鎖住「箱子本身不能換」，但箱子裡的東西可以動。

例子加強理解
例子一
假設在天空看目前有三朵雲

let cloud = 3; //3

結果風一吹變成8朵

cloud = 8; //8 ,let可以隨時做調整

那麼太陽就只有一顆

const sunNum = 1; // const宣告永遠只有一顆

例子二
今天店開張賣帽子，全面打七折，帽子一頂100元

const sale = 0.7; //const固定
const hatPrice = 100; //const固定

今天第一個客人說要買三頂帽子

let hatNum = 3; //let可調整
let total = sale * hatPrice * hatNum;
tital //210

第二個客人說要買十頂帽子

hatNum = 10;
let total = sale * hatPrice * hatNum;
tital //700

宣告變數的一些特性

不能用const當作變數

let const = 1 ;❌

變數開頭不能是數字

let 1hdsj = 2 ;❌

變數有區分大小寫

let catNum = 1;
let catnum = 2;

中文可以當變數

let 名字 = Renee;

支援特殊字元

let _a = 6 ;
let $xyz = 7;

保留字
當宣告變數時，不要去撞字
可以在google搜尋 javascript keyword
https://www.w3schools.com/js/js_reserved.asp
裡面會告知一些keyword不適合做為變數名稱

[以上為學習筆記,如有誤再請告知]