簡寫用的"恰當"，可以讓整份程式碼變的很好閱讀
就像一篇充滿語助詞或贅詞的文章和一篇 行數少一半 用字遣詞很精準 的文章

用 Vue 的 util.ts 這個檔案當作例子，可以發現 if...else else if 用的很少

每一個 function 幾乎都不超過 10 行

例如:

export function toString(val: any): string {
  return val == null
    ? ''
    : Array.isArray(val) || (isPlainObject(val) && val.toString === _toString)
    ? JSON.stringify(val, null, 2)
    : String(val)
}

export function isPromise(val: any): val is Promise<any> {
  return (
    isDef(val) &&
    typeof val.then === 'function' &&
    typeof val.catch === 'function'
  )
}

看到 && || ? ... : ... 這些都是簡寫的方式！

簡寫之前，先複習 Logical operators (邏輯運算子)

以下範例及內容皆取自
Logical operators
Nullish coalescing operator '??'

『 運算式是由運算元和運算子組成 』

『 邏輯運算子用來判斷運算式的真或假，結果只會有 true 或 false 』

JavaScript 有四個邏輯運算子

1. || (OR)
2. && (AND)
3. ! (NOT)
4. ?? (Nullish Coalescing) (中文: 空值合併運算子)

|| (OR)

|| 有四種可能的組合

alert( true || true );   // true
alert( false || true );  // true
alert( true || false );  // true
alert( false || false ); // false

遇到不是 Boolean 值的運算元，會先轉成 Boolean，再來比較

『 除非所有的運算元都為 false，否則結果都為 true 』
(白話: 抓到一個 true，就算你 true)

|| 用在 if 條件式的話，可以用來驗證眾多條件中是否有一個條件成立

let hour = 12;
let isWeekend = true;

if (hour < 10 || hour > 18 || isWeekend) {
  alert( 'The office is closed.' ); // it is the weekend
}

還可以用在賦值上

result = value1 || value2 || value3;
// 1. 從左至右檢查運算元
// 2. 每一個運算元都會被轉成 boolean，一旦結果是 true，馬上停止，並回傳運算元原始的值
// 3. 如果全部的運算元都是 false，會回傳最後一個運算元

『 回傳的都是原始值，不會被轉換』
『 || 回傳找到的第一個 truthy 值； 或是最後一個值 』

|| 常使用在:

1. 多個變數或表達式中取得第一個 truthy 值
2. Short-circuit evaluation (短路求值) (補充:運算元也可以是一個表達式，例如執行函式或是變數賦值，如下方範例)

// Short-circuit evaluation
true || alert("not printed");
false || alert("printed");
// 結果會執行 alert("printed")

&& (AND)

同樣的， && (AND) 也是類似的規則

result = value1 && value2 && value3;
// 1. 從左到右對運算元進行估值
// 2. 將每一個運算元轉成 boolean，如果遇到結果為 false，馬上停止，立即回傳這個運算元的值
// 3. 假設所有的運算元都已經被運算了(全部為 truthy)，回傳最後一個運算元

『 && 回傳遇到的第一個 falsy 值，或是最後一個值 』

例如:

alert( 1 && 2 && null && 3 ); // null
alert( 1 && 2 && 3 ); // 3, the last one

!(NOT)

1. 用來將運算元轉換成 boolean
2. 回傳 inverse value (true--> false; false--> true)

alert( !true ); // false
alert( !0 ); // true

而 !! 常用來把值轉換成 Boolean
第一個 ! 將值轉換成 boolean，並回傳 inverse value
第二個 ! 又再 inverse value 一次

?? (Nullish coalescing)

回傳第一個不為 null/undefined 的值

result = a ?? b 等於 result = (a !== null && a !== undefined) ? a : b;

最常用來給預設值用

例如:

let user;
alert(user ?? "Anonymous"); // Anonymous (user not defined)

let user = "John";
alert(user ?? "Anonymous"); // John (user defined)

一樣也可以用在一系列的變數中，找出有定義的那個值

let firstName = null;
let lastName = null;
let nickName = "Supercoder";

// shows the first defined value:
alert(firstName ?? lastName ?? nickName ?? "Anonymous"); // Supercoder

?? 和 || 的差異

let height = 0;

alert(height || 100); // 100
// || 會將 `0` `false` `""` `null` `undefined` 都視為 falsy

alert(height ?? 100); // 0

?? 回傳第一個有定義的值
|| 回傳第一個 truthy 的值

最後小結:

『 利用 Logical operators，省下大把大把的 if...else... 』

『 不用在多個 if else 中，尋尋覓覓最終值的答案 』