「三元運算子」不好嗎?


Posted by TempuraEngineer on 2023-02-12

目錄


“Any fool can write code that a computer can understand. Good programmers write code that humans can understand.” — Martin Fowler

笨蛋寫電腦能理解的code,優秀的程式開發者則寫人類能理解的code


Golang、Rust為什麼沒有

Golang的FQA中提到因為語言的設計者發現使用三元運算子(?:)常常會創造出低可讀性的程式碼

因此官方建議使用if else。雖然長了點,但是好讀許多。Rust沒有三元運算子也是基於這個理由


Javascript 與 ?:

雖然上段提到三元運算子常常會創造出低可讀性的程式碼,但並非完全不能用而是避免巢狀三元運算子

舉例的話,以下不適合用

// 巢狀三元運算子(X)
// 可讀性低
p === 'passion fruit'? 10 : p === 'papaya' ? 2 : 0;

// if else(O)
if(p === 'passion fruit'){
    return 10;
}else if(p === 'papaya'){
    return 2;
}

return 0;

// switch case(O)
switch(p){
    case 'passion fruit':
        return 10;
    case 'papaya':
        return 2;
    default:
        return 0;
}

以下則可以

// 巢狀三元運算子(O)
p === 'passion fruit'? 10 : 0;

// if else(O)
if(p === 'passion fruit'){
    return 10;
}else{
    return 0;
}

return 0;

// switch case(X) 
// case太少沒必要用
switch(p){
    case 'passion fruit':
        return 10;
    default:
        return 0;
}


(React)JSX 與 ?:

在撰寫JSX時,除了可讀性,也應該考慮是否2個分支中有1個是什麼都不做

舉例的話,以下不適合用

const Product = () => (
  <div>
    <h1>Welcome To Tempura Supermarket</h1>
    <h3>Below are our price table.</h3>

    // loading時什麼都不顯示,反之顯示表格
    {!loading? <PriceTable /> : null}

    // 用&&會更合適,因為不顯示的話就不必多寫null出來
    {!loading && <PriceTable />}
  </div>
)

以下則可以用

const Product = () => (
  <div>
    <h1>Welcome To Tempura Supermarket</h1>
    <h3>Below are our price table.</h3>

    // loading時顯示進度條,反之則顯示表格
    {loading? <CircularProgress /> : <PriceTable />}
  </div>
)


參考資料

Stop using nested ternary operators. Here’s why.
Why does Go not have the ?: operator?


#ternary operator #三元運算子







Related Posts

【筆記】Command Line 入門筆記

【筆記】Command Line 入門筆記

8 月開始上班,切換行銷與寫程式的腦袋

8 月開始上班,切換行銷與寫程式的腦袋

Print one to n

Print one to n


Comments