昨天講完 Truthy（真值） 和 Falsy（假值）的概念後，接著要來談談 JavaScript 中 邏輯運算子（Logical Operators）。邏輯運算子是拿來執行邏輯相關運算用的，主要的運算子包括 &&（邏輯 AND）、||（邏輯 OR）、??（空值合併運算子） 和 !（邏輯 NOT）。這些運算子在條件判斷中有非常重要的作用，其中還牽涉到 短路解析 的概念。在這篇文章中將深入介紹這些邏輯運算子，那我們開始吧。

邏輯 AND 運算子「&&」

&& 運算子會在左側的值為 Falsy 的情況下回傳左側的值，否則回傳右側的值。
這個運算子在條件判斷中通常用於確保所有條件都滿足的情況。

let a = 5;
let b = 7;

console.log(a && b); // 輸出 7，因為左側的值為真值，故 `&&` 回傳右側的值

let x = 5;
let y = 7;

console.log(x>10 && y); // 輸出 false，因為左側的值為假值，故 `&&` 回傳左側的值

邏輯 OR 運算子「||」

|| 運算子運算子會在左側的值為 Truthy 的情況下回傳左側的值，否則回傳右側的值。
這個運算子在條件判斷中通常用於確保至少有一個條件滿足的情況。

let a = 5;
let b = 7;

console.log(a || b); // 輸出 5，因為左側的值為真值，故 `||` 回傳左側的值

let x = 5;
let y = 7;

console.log(x>10 || y); // 輸出 7，因為左側的值為假值，故 `||` 回傳右側的值

空值合併運算子「??」

?? 運算子是在 ES11 引入的，
它只會在左側的值為 null 或 undefined 的情況下回傳右側的值，否則回傳左側的值。
這個運算子通常用於要處理的值可能為空值的情況。

let myScore;
let defaultScore = 50;

// 輸出 50，因為左側的值為 undefined，故 `??` 回傳右側的值
console.log(myScore ?? defaultScore);

let myScore = 87;
let defaultScore = 50;

// 輸出 87，因為左側的值不是 null 或 undefined，故 `??` 回傳左側的值
console.log(myScore ?? defaultScore); 

邏輯 NOT 運算子「!」

! 運算子用於反轉一個值的真假。
如果值為 Truthy 的情況下則回傳 false，反之為 Falsy 則回傳 true。
透過這個運算子回傳的結果一定是布林值。

let a = -99;
let b = 0;

console.log(!a); // 輸出 false
console.log(!b); // 輸出 true

關於「短路解析」

短路解析，或稱 短路運算 等等，是一種程式中的運算行為，通常發生在邏輯運算中。
邏輯運算式是由左向右解析的，如果左側的運算元已經確定了整個運算式的結果，則不會再執行右側的運算元，這種情況被稱為「短路」。剩餘部分的運算式並沒有被解析，因此不會占用任何效能。

function myFn() {
    console.log('Hello~');
    return true;
}

// 由於 && 的左側為假值，故已確定會回傳左側的值，因此不會再執行右側的 myFn()
const result = false && myFn();

總結

透過深入了解這些邏輯運算子（&&、||、??、!）及 短路解析 的特性，可以更有效地處理條件判斷、空值處理和邏輯運算等等，確保我們的程式碼在各種情況下都能更簡潔且正確地運作。那麼今天就到這邊，我們下次見~