本章為 JavaScript 核心重構的第二天，我們將深入探討變數宣告與作用域的生存法則。在程式開發中，隨意宣告變數或無視作用域邊界是引發不可預期 Bug 的元兇。本篇將完整比較 const、let 與 var 的底層特性差異，包含區塊作用域 (Block Scope)、暫時死區 (TDZ) 的保護機制以及 typeof 型別辨析，帶領冒險者建立清晰的變數管理觀念與守衛法則。
Day 02: 清點魔法物資 —— 變數宣告與作用域的生存法則
本文同步分享於2026鐵人賽：JS 核心重構：勇者轉職傳說
孩子，在踏上今日的領地前，先坐下來喝杯酒吧。 修煉的路很長，別急著奔跑，先聽聽這份卷軸裡的古老叮嚀。
我在每一站的盡頭都為你鋪設了 「
實戰演武場 CodePen」。那不只是程式碼的拼湊，而是你在這場暴風雨中，試圖用邏輯點燃的一顆星火。 成功突圍後，別忘了帶著你的戰利品回到 「QuestBoard 佈告欄」。在那裡，你會發現自己從不孤單，公會的夥伴們都正舉杯等待你的歸來。記住...
「 導師看重的從來不是你的劍法有多華麗，而是當你被邏輯擊潰、滿身泥濘後，再次向真相發起衝鋒的勇氣。 」
🛡️ 【公會大廳：導師的修煉導讀】
既然學會了在 Day 01 控制台與冒險者的第一眼 中「看見世界」，我們得開始學會「打點物資」。
你看，公會的地下檔案室裡，一堆沒標籤的藥水正散落一地。這就是為什麼新手總是死在第一個轉角。你以為那一瓶是補血藥，但因為沒貼標籤，你喝下去後才發現那是巨龍的膽汁。
在我們的領域中，隨便把變數丟在地上不宣告、或是貼錯了那種會「滲透牆壁」的舊標籤，是極大的禁忌。今天你的任務是學會三種不同的標籤貼法：哪些是用強力膠焊死的？哪些是可以隨時撕下來換貼的？記住，標籤貼錯地盤，可是會引發大規模爆炸的。
💡 【導師講義：底層真相探究】
1. 勇者的三種標籤貼紙 (const, let, var)
我們把變數想像成你要帶進副本的「物資」，首先我們要選擇適合它的標籤：
const(強力膠標籤)：職業首選！ 標籤一旦貼上，物資就嚴禁更換。index.jsconst heroName = "辛梅爾";// heroName = "芙莉蓮"; // ❌ 報錯！勇者的名字怎麼能隨便改呢？console.log(heroName); // (利用 Day 01 觀察)let(區域姓名貼)：非常有原則。內容可以更換，但它嚴禁離開所屬的房間{ }。index.jslet goldCount = 100;goldCount = 500; // ✅ 沒問題，冒險路上金幣隨時會變多。var(不受控的穿牆術)：古老的遺物。它的眼裡沒有牆壁，經常會從房間滲透到野外。勇者辛梅爾已經下令廢除它了。
2. 鑑定術：typeof
在清點物資時，我們必須一眼看穿物品的本質（型別）。
// 💡 利用 Day 01 學到的 log 進行鑑定
console.log(typeof "辛梅爾"); // "string" (字串)
console.log(typeof 100); // "number" (數字)
console.log(typeof null); // "object" (⚠️ 這是遠古時代留下的 Bug 陷阱！)
| 特性 | const | let | var |
|---|---|---|---|
| 是否能更換內容 | ❌ 焊死 (不可重新賦值) | ✅ 可以 | ✅ 可以 |
是否受房間 {} 限制 | ✅ 是 (Block Scope) | ✅ 是 (Block Scope) | ❌ 否 (穿牆) |
| 是否具備提升 (Hoisting) | ❌ 無 (TDZ 保護) | ❌ 無 (TDZ 保護) | ✅ 有 (混亂源頭) |
3. 邏輯流向圖解
導師的圖解心法： 想像每一個大括號
{ }都是一間封閉的密室。let與const會乖乖待在裡面守衛，而var則是像幽靈一樣可以隨意穿牆，攪亂外部世界的安寧。
⚔️ 【戰術對抗：學長與學弟的代碼對決】
招式示範：作用域領地的防衛
展示「冒險學弟 (新手)」與「勇者學長 (高級職人)」的視角落差。
❌ 冒險學弟：穿牆幽靈 var
- 負能量評級：🔴 體力活過多 / 🔴 邏輯容易斷裂
if (true) {
var secretScroll = "古老卷軸"; // 在房間內貼標籤
}
// 學弟心聲：嘿嘿，我居然在房間外也能印出房間裡的卷軸！
console.log(secretScroll); // 🟡 居然還活著？這會讓你的行囊系統徹底壞掉。
✅ 勇者學長：守規矩的區塊管理 let
- 利潤評級：🟢 邏輯極簡 / 🟢 充滿維護彈性
if (true) {
let magicWand = "魔法杖"; // 在房間內貼標籤
}
// 學長叮嚀：孩子，資源過期就該消失，這才叫專業。
// console.log(magicWand); // ❌ 噴錯：magicWand is not defined (這才是正確的守衛！)
你看，學長跟學弟的差距，不在於咒語的長短，而是在於對「生存邊界」的尊重。優先全用 const，非變動不可才用 let，徹底埋葬 var，這是目前公會最強大的生存法則。
🏰 【勇者精英課：不可變性的種子】
為什麼公會如此強調 const？
在未來的「大型團隊冒險 (某個強大的現代開發框架)」中，我們極度強調 「不可變性 (Immutability)」。
當一個資料被宣告為 const，我們就能放心地在程式的其他地方使用它，而不必擔心某個路過的隊友偷偷改了它。「減少狀態的變動」是讓你的代碼從「生鏽長劍」變為「傳奇神兵」的關鍵。
🛖 【營火叮嚀：導師的經驗談】
孩子，導師回憶當年剛入行時，為了一時方便，全篇都用 var 來寫邏輯。我以為我掌握了某種「大統一咒語」，代碼寫得飛快。
結果有一次，我在一個深層的循環內改了一個變數，結果那個變數竟然悄悄地「穿牆」出去修改了當時最重要的「玩家金幣 (gold)」全域變數。那次之後，公會的帳目全部泡湯，我也差點被逐出公會。
從那天起我明白：「限縮權力的邊界，才是對邏輯最大的溫柔。」
天色微亮，營火雖已燃盡，但你眼中卻閃爍著領悟的光芒。在前往演武場挑戰關卡前，我已經幫你把靈魂碎片精煉成了這份「戰術錦囊」。拿好它，今日的任務不再是負擔，而是你證明自我的舞台。去吧，公會的英雄榜在等著你的戰報。
📝 【夥伴筆記：今日修煉精華】
這份筆記是你的隨身護身符，卡關時看一眼，真相就在裡面。
- 標籤三選一：焊死用
const，會變用let，嚴禁使用var。 - 作用域守衛：記得
{ }就是牆壁。變數不該跑去外面鬧事。 - TDZ (暫時死區)：標籤貼上（宣告）之前，千萬別想去抓它。
- typeof null：看到 "object" 別驚慌，那是公會歷史留下的舊傷疤。
🎯 【實戰演武場】
⚔️ 任務鑑定條件：
- 完成 📜 本日實戰任務 (CodePen)。
- 將 CodePen 網址貼至 QuestBoard，並回填鑑定報告：
- 初心者：物資守衛鑑定 (成就感發掘)：今天成功使用
const焊死物資時，有沒有一種「代碼變得很可靠」的安全感？ - 冒險者：型別破惑挑戰 (理性挑戰)：為什麼導師強烈建議「優先使用 const」？
- 初心者：物資守衛鑑定 (成就感發掘)：今天成功使用
- 任務完成後，你的名字將永遠標記在公會的英雄榜上！
給錯標籤的空窗期 (TDZ)：標籤貼上（宣告）之前，千萬別想去抓它。這就是「暫時死區（TDZ）」，就像是一個 「還沒入隊就想領裝備」 的勇者，公會會直接請你吃閉門羹（拋錯）。
📚 【圖書館卷軸與前後站連結】
- ⬅️ 前導冒險： Day 00 賽前宣言：勇者冒險的起點
- ⬅️ 上一站冒險： Day 01 看見世界的儀式：控制台與冒險者的第一眼
- MDN 官方文獻： let 宣告與區塊範圍
- MDN 官方文獻： const 宣告與不可變性