Day 12: 原理篇 —— 【邏輯開關】&&、|| 與 ?? 的短路判斷：老手最愛用的簡潔語法

在 JavaScript 開發日常中，處理資料防呆與預設值賦值是極其高頻的操作。如果一味依賴深層巢狀的 if/else，不僅會讓程式碼變得臃腫，更大幅增加了維護成本。本章節將透過公會導師的圖解心法，深度拆解 &&（邏輯且）、||（邏輯或）與 ES2020 引入的 ??（空值合併運算子）的短路求值（Short-circuit evaluation）底層原理。我們將剖析 Truthy 與 Falsy 假值的判定邊界，特別是數值 0 與空字串在防禦判斷中經常遭受的「語意誤殺」，幫助你精準設置保險絲，寫出優雅且滴水不漏的現代化程式碼。

本文同步分享於2026鐵人賽：JS 核心重構：勇者轉職傳說

📜 這裡的修煉規則

孩子，在踏上今日的領地前，先坐下來喝杯酒吧。 修煉的路很長，別急著奔跑，先聽聽這份卷軸裡的古老叮嚀。

我在每一站的盡頭都為你鋪設了 「實戰演武場 CodePen」。那不只是程式碼的拼湊，而是你在這場暴風雨中，試圖用邏輯點燃的一顆星火。 成功突圍後，別忘了帶著你的戰利品回到 「QuestBoard 佈告欄」。在那裡，你會發現自己從不孤單，公會的夥伴們都正舉杯等待你的歸來。

記住...

「 導師看重的從來不是你的劍法有多華麗，而是當你被邏輯擊潰、滿身泥濘後，依然選擇握緊理性的劍柄，再次向真相發起衝鋒的勇氣。 」

🛡️ 【公會大廳：導師的修煉導讀】

「導師，如果我在地圖上找不到那個藥草採集點，我的程式就直接噴錯毀掉了，該怎麼辦？」

我指著遠方說：「冒險者，身為專業的戰場指揮官，你必須學會準備『備案計畫』。如果 A 計畫（資料存在）失敗了，就要自動執行 B 計畫（使用預計備案）。這不是靠寫一堆冗長的 if/else，而是靠這三組極速短路開關。」今天，我們要學習如何用最簡潔的一行代碼，完成最穩定的防禦。

---

💡 【導師講義：底層真相探究】

1. 短路判斷 (Short-circuiting)

在 JavaScript 的邏輯運算中，它非常「懶惰」。如果前面的條件已經足夠決定結果，它就根本不會去執行後面的代碼。

📋 核心三板斧

1. && (且)：通行證。只有前面過關 (True)，才有資格領後面的獎勵。
2. || (或)：備援備選。只要前面有了 (True)，後面的備案就不用上場。
3. ?? (空值合併)：精準守衛。專門對付「完全沒領到獎勵 (null/undefined)」的情況。

2. 運算子的運作詳解

🟢 && (且)：條件觸發器

從左往右看，遇到第一個 Falsy (假值，如 0, "", null, undefined, NaN, false) 就直接回傳該值，不再往後走；若全部皆為 Truthy，則回傳最後一個值。

logical-and.js

// 如果 user 存在，才讀取 user.name (防噴錯神技)
const name = user && user.name;

🟡 || (或) ：通用預設值

從左往右看，遇到第一個 Truthy (真值) 就直接回傳；若全部皆為 Falsy，則回傳最後一個值。

logical-or.js

// 如果輸入名字是空的，就給他 "無名冒險者"
const display = inputName || "無名冒險者";

🔵 ?? (空值合併)：最精準的備案

ES2020 現代語法。它只在左側為 null 或 undefined 時，才會啟動右側的預設值。它會完整保留 0 與 ""（空字串）這種具有實際業務意義的值。

nullish-coalescing.js

// 只有在 count 是 null 或 undefined 時，才套用預設值 10
const total = count ?? 10;

---

3. 邏輯流向圖解

🛖 營火叮嚀：導師的圖解心法

短路運算子就像是電路板上的 「智慧開關」。&& 會在遇到第一個斷路（Falsy）時立刻停下；|| 會在尋找第一個通路（Truthy）後滿意而歸。它們不是單純的判斷，而是 「懶惰但高效」 的資料過濾器。

---

⚔️ 【戰術對抗：學長與學弟的代碼對決】

招式示範：代碼的極簡連發

❌ 冒險學弟：寫不完的巢狀判斷

• 負能量評級：🔴 代碼太肥 / 🔴 邏輯被淹沒

nested-if.js

let nickname;
if (user.name) {
  nickname = user.name;
} else {
  nickname = "無名勇者";
}

✅ 勇者學長：優雅的短路開關

• 利潤評級：🟢 邏輯瞬間清晰 / 🟢 充滿維護彈性

short-circuit-pro.js

// 1. 設定預設值 (精準剔除 null/undefined)
const nickname = user.name ?? "無名勇者";

// 2. 條件執行 (有登入才顯示面板)
isLoggedIn && showDashboard();

---

🏰 【勇者精英課：邁向職人的進階架構】

避免「語意誤殺」：0 的冤獄

⚠️ 實戰雷區：避開那些致命陷阱

很多新手會習慣用 || 來設定預設值，但請特別小心！如果你有一筆資料攻擊力剛好是 0（例如受詛咒的木劍），而你寫了 const currentAtk = atk || 100，這隻史萊姆的攻擊力會莫名其妙變成 100，因為 0 在 JavaScript 裡會被判定為 Falsy。

這就是為什麼在現代職人開發中，我們更推薦 ??（空值合併運算子）。它能精準分辨出「我是 0（有數值）」與「我還沒拿到資料（null / undefined）」的區別，避免產生令人抓狂的業務邏輯 Bug。

---

🛖 營火叮嚀：導師的經驗談

孩子，導師教你一個保命守則：「不要隨便誤殺 0 與空字串。」

在大數據處理中，這兩個值往往代表著真實的狀態，而不是「空值」。請優先使用 ??。這道保險絲，能讓你在處理萬筆資料流時，依然能優雅地指揮全局，而不必寫一堆冗贅的 if/else。

天色微亮，營火雖已燃盡，但你眼中卻閃爍著領悟的光芒。在前往演武場挑戰關卡前，我已經幫你把靈魂碎片精煉成了這份「戰術錦囊」。拿好它，今日的任務不再是負擔，職人的舞台在等著你。

📝 【夥伴筆記：今日修煉精華】

這份筆記是你的隨身護身符，卡關時看一眼，真相就在裡面。

• && (且)：通行證。只有前面通過了 (Truthy)，才拿取後方數值。
• || (或)：備援備選。只要前面為假 (Falsy)，就切換至後方備案。
• ?? (空值)：精準保險。只有無效值 (null / undefined) 才會啟動預設值。

---

🎯 【實戰演武場】

• 📜 本日實戰任務：邏輯開關的防禦與默契 (CodePen)
• 🛡️ 任務達成證明：QuestBoard 公會報到處

⚔️ 任務鑑定條件：

1. 完成 📜 本日實戰任務 (CodePen)。
2. 將 CodePen 網址貼至 QuestBoard，並回填鑑定報告：
   • 初心者：短路安全感鑑定 (成就感發掘)：
     • 1. 今天第一次用 ?? 成功防禦住「無效攻擊 (null/undefined)」時，有沒有一種心靈安定的感覺？
   • 冒險者：Falsy 的冤獄 (理性挑戰)：[⚡ 觀念辨析]
     • 1. 為什麼導師說數值 0 經常在 || 中被誤判？這在顯示「勇者剩餘血量」時會造成什麼慘劇？
3. 任務完成後，你的名字將永遠標記在公會的英雄榜上！

---

📚 【圖書館卷軸與前後站連結】

• 前導冒險： Day 00: 勇者村的入村儀式
• 上一站冒險： Day 11：原理篇 —— 類別 Class：幫你的程式碼穿上「制服」
• 下一站冒險： Day 13：原理篇 —— DOM 樹大探險：如何精準抓取網頁裡的元素？
• MDN 官方文獻： MDN 邏輯運算子 (Logical Operators)
• MDN 官方文獻： MDN 空值合併運算子 (Nullish Coalescing Operator)