分享三個平常最常用的"簡寫"

1. The Ternary Operator (三元運算子)

最常使用到 if，根據條件成立與否，來決定變數的值

例如:

if (age > 18) {
  accessAllowed = true;
} else {
  accessAllowed = false;
}

類似這樣的寫法，也可以用 ternary 運算子取代 (補: ternary 是唯一使用三個運算元的運算子)

語法為: 條件 ? 條件為 truthy 執行的內容 : 條件為 falsy 執行的內容

上面例子可以改寫為

let accessAllowed = (age > 18) ? true : false;

也可以一次使用多個 ?

function example(…) {
    if (condition1) { return value1; }
    else if (condition2) { return value2; }
    else if (condition3) { return value3; }
    else { return value4; }
}

// 可以改寫成
function example(…) {
    return condition1 ? value1
         : condition2 ? value2
         : condition3 ? value3
         : value4;
}

Conditional branching: if, '?' 有提到 ? 的使用時機

例如下面兩種寫法:

// 使用 ? ---> 不推薦
let company = prompt('Which company created JavaScript?', '');
(company == 'Netscape') ?
   alert('Right!') : alert('Wrong.');
   
// 使用 if
let company = prompt('Which company created JavaScript?', '');

if (company == 'Netscape') {
  alert('Right!');
} else {
  alert('Wrong.');
}

依條件結果來執行不同的內容，用 ? 取代 if，反而會讓程式碼不易閱讀

建議是:
單純的變數賦值 --> 使用 ?
需要執行不同的區塊內容 --> 使用 if

2. 宣告變數

一行完成多個變數宣告

let x; 
let y = 20; 

// 可以改寫成
let x, y = 20;

宣告多個變數也可以使用 Destructuring assignment (解構賦值)
將 Array 或是 Object 裡的值取出，賦值給變數

// -------------- Array --------------
let a, b, rest;
[a, b] = [10, 20];

console.log(a); 
// expected output: 10

console.log(b);
// expected output: 20

[a, b, ...rest] = [10, 20, 30, 40, 50];
// ...rest --> 將 array 沒被提取出來的值，另存給 rest，也可用在 object

console.log(rest);
// expected output: Array [30,40,50]

// -------------- Object --------------
const obj = { a: 1, b: 2 };
const { a, b } = obj;
// 等同於
// const a = obj.a;
// const b = obj.b;

3. 預設值

為了避免不符合預期的變數值，造成後續程式執行有誤 或是 想避免畫面出現空版 (例如: 圖片 404 )
可依據不同情境，使用 || 、 ?? 或是 Function 預設參數 的方式 來指定一個預設值

// ----------------- 用在變數上 -----------------
function showMessage(text) {
  // 當 text 沒定義或是為 falsy 時， text 內容為 empty
  text = text || 'empty';
  alert(text);
}
showMessage() --> empty
showMessage('') --> empty 
// '' 會變轉換成 falsy, 所以印出 empty


// ----------------- 用在 Function Parameter 上 -----------------
function showMessage(text = 'empty') {
  // 沒有傳入 parameter 時, text 使用 empty
  alert(text);
}
showMessage() --> empty
showMessage('') --> 印出空白
// 有傳入'' --> 取出引號中的內容 --> 印出空白

同樣是 showMessage('') 會有不同的結果！

如果變數寫法 text = text || 'empty' 改成 text = text ?? 'empty'
執行 showMessage('') 就可印出空白 (可以參考上一篇 || 的解釋)

最後小結:

『 不過度追求簡寫，追求的不是少那幾行，而是追求淺顯易懂。 』