JavaScript 語言 – 運算子（Operators）

主題：邏輯運算子（&&、||、!）

---

簡介

在日常的程式開發中，條件判斷是最常見的需求之一，而邏輯運算子正是實作條件判斷的核心工具。
&&（AND）與 ||（OR）讓我們可以在單一表達式裡同時檢查多個條件，!（NOT）則提供了「反向」的判斷方式。掌握這三個運算子的行為，不僅能寫出更簡潔的程式碼，還能提升執行效能與可讀性。

對於 初學者，了解它們的「短路求值」機制（short‑circuit evaluation）是突破概念瓶頸的關鍵；而 中級開發者則需要在實務中善用這些特性，以避免不必要的副作用、提升程式的安全性與效能。以下將從概念、範例、常見陷阱到實務應用，全面說明 JavaScript 的邏輯運算子。

---

核心概念

1. 基本語意

運算子	語意	範例	結果
&&	且，兩側皆為 true 時才回傳 true	true && false	false
`		`	或，任一側為 true 即回傳 true
!	非，將布林值反轉	!true	false

注意：在 JavaScript 中，任何值皆可參與布林運算，會先被隱式轉型為 真值（truthy）或 假值（falsy）。常見的 falsy 值有 false、0、''、null、undefined、NaN。

2. 短路求值（Short‑circuit）

&& 與 || 具備短路特性——當左側已足以決定最終結果時，右側的運算子 不會被執行。這點在寫 條件式 或 防呆檢查 時特別有用。

• &&：左側為 false 時，直接回傳左側，右側不會求值。
• ||：左側為 true 時，直接回傳左側，右側不會求值。

3. 邏輯運算子與值的回傳

不同於其他語言，JavaScript 的 &&、|| 會回傳 運算結果本身（而非單純的 true/false），因此可直接利用它們做「預設值」或「條件執行」的技巧。

const name = userInput || '匿名使用者';   // 若 userInput 為 falsy，回傳預設字串
isLoggedIn && showDashboard();          // 若 isLoggedIn 為 true，才呼叫 showDashboard()

---

程式碼範例

以下示範 5 個在實務開發中常見且具代表性的範例，並附上說明註解。

範例 1️⃣ 防呆檢查：避免 null 或 undefined 的屬性存取

// 假設 data 可能是 null、undefined，或是一個物件
const city = data && data.address && data.address.city;
console.log(city); // 若任何一步為 falsy，city 會是 undefined

使用 && 可一次檢查多層屬性，避免 TypeError: Cannot read property 'city' of undefined。

範例 2️⃣ 預設值：|| 當作「或」的備援

function greet(name) {
  // 若 name 為 falsy（如空字串、null），使用預設值
  const displayName = name || '訪客';
  console.log(`哈囉，${displayName}！`);
}
greet();          // 哈囉，訪客！
greet('Alice');   // 哈囉，Alice！

範例 3️⃣ 條件執行：利用 && 直接呼叫函式

function logError(err) {
  console.error('錯誤:', err);
}

// err 只在開發環境才需要印出
const isDev = process.env.NODE_ENV === 'development';
err && isDev && logError(err);   // 若 err 為 falsy，或不是開發環境，logError 不會被呼叫

範例 4️⃣ 結合 ! 產生「非」條件

function isAdult(age) {
  return age >= 18;
}

// 判斷是否未成年
const age = 16;
if (!isAdult(age)) {
  console.log('未滿 18 歲，無法註冊');
}

範例 5️⃣ 多條件判斷的簡潔寫法

function canAccess(user) {
  // 必須同時具備 admin 身份且帳號已啟用
  return user.isAdmin && user.isActive;
}

// 使用 OR 來判斷是否有任一種權限
function hasPermission(user) {
  return user.isAdmin || user.isEditor || user.isViewer;
}

---

常見陷阱與最佳實踐

陷阱	說明	建議的寫法
隱式類型轉換	直接使用 &&/`
優先順序誤解	! 的優先權最高，&& 次之，`
短路副作用	依賴右側的副作用（例如函式呼叫）可能在短路時不會執行。	若必須執行，請將副作用寫在獨立語句中，或使用 if。
Falsy 與 0 的混淆	0、''、NaN 皆為 falsy，若這些值本身是有效資料，使用 `
過度鏈式 &&	長串的 && 會降低可讀性，且不易除錯。	盡量拆成多行或使用可讀性更好的 optional chaining（?.）語法（ES2020 之後）。

最佳實踐小結

1. 明確意圖：若僅想要布林結果，使用 Boolean() 或雙感嘆號 !! 進行顯式轉型。
2. 利用短路：在需要「預設值」或「條件執行」時，善用 ||、&&，但避免在右側放置重要副作用。
3. 保持可讀性：過長的鏈式運算建議改用 if、switch 或 ES2020 的 optional chaining（obj?.prop?.sub）。
4. 測試 falsy：對於可能為 0、'' 的欄位，避免直接使用 ||，改用 ??（nullish coalescing）或更精確的檢查。

---

實際應用場景

場景	為何適合使用邏輯運算子	範例程式
表單驗證	同時檢查多個欄位是否符合規則	if (isRequired && isEmail && !hasError) { submit(); }
權限控管	多種角色的「或」關係或「且」關係	`if (user.isAdmin
API 回傳的預設值	若回傳值為 null/undefined，使用預設值	const limit = response.limit ?? 10;（結合 ??）
效能優化	只在必要時才呼叫昂貴的函式	debug && console.log('詳細資訊', heavyComputation());
條件渲染（React / Vue）	依條件決定是否渲染元件	{isLoggedIn && <Dashboard />}

---

總結

• &&、||、! 是 JavaScript 中最基礎且最常用的邏輯運算子，掌握它們的「短路求值」與「回傳值」特性，能讓條件判斷更簡潔、效能更佳。
• 在實務開發時，明確的類型轉換、適當的括號、避免副作用 是避免常見錯誤的關鍵。
• 結合 optional chaining (?.)、nullish coalescing (??)，可進一步提升程式碼的安全性與可讀性。
• 透過本文提供的範例與最佳實踐，讀者應能在日常開發、表單驗證、權限控管、API 處理等情境中，自信且正確地使用 JavaScript 的邏輯運算子。

祝你在 JavaScript 的世界裡，寫出更乾淨、更可靠的程式碼！ 🚀