iT邦幫忙

2022 iThome 鐵人賽

DAY 9
0

他們離開的方式,已經說明了一切。

Rupi Kaur

今天我們接續昨天的控制流程control flow中的guard clauses,再近一步聊聊if-else

仔細品味guard clauses,我們可以發現它不僅擺脫了嵌套式的判斷關係,更沒有使用到else關鍵字。

幾乎對於各種程式語言初學者來說,if-else的關係正如同熱戀期的情人,膩不可分。

事實上,如果你的函式包含了else的部分,這很大的機率表示該函式做了很多件事情(不單純,很複雜)。

函式多工的情形,恰好違反了單一職責原則single responsibility principle。據此,容易導致出錯的分支,尤其在程式規模較大時會增加檢查的成本(因為邏輯也較為複雜)。

每當要使用else時,問自己是否有更好替代方案。

事實上,正如我們昨天所看到的:gaurd clauses就是一個避免else的好方法。今天,我們則介紹另一個方式:default values。

Default Values

顧名思義,就是捨棄else,改設立default values。我們來看個例子:

問題描述 函數squareOdd的輸入是一個數字,如果是奇數則輸出其平方值,偶數則輸出不變。

一個直覺的寫法是:

// 可能會被討厭的寫法
function squareOdd(n) {
    let result;
    
    if (n % 2 === 0) {
        result = n;
    } else {
        result = n ** 2;
    }
    
    return result;
}

我們可以用default value重構如下:

// 不太會被討厭的寫法
function squareOdd(n) {
    let result = n;
    
    if (n % 2 != 0) {
        result = n ** 2;
    }
    
    return result;
}

如此一來,就可以使用default value來避免使用else。我們可以進一步思考,是否上述這段代碼可以更好:顯而易見的,從過去幾天的經驗來看,這段代碼是imperative的,因此我們可以改為更好的寫法,例如以下寫法:

// 最不會被討厭的寫法
function squareOdd(n) {
    if (n % 2 === 0) {
        return n;
    }
    
    return n ** 2;
}

最後這個版本,可能是這三者之中最好的,因為:

  1. 沒有變數的reassignment!所以不是imperative的。
  2. 沒有使用到else
  3. 最關鍵的邏輯(平方)是表現在函數的最後(這與guard clause思路ㄧ致)。也是許多發展者喜歡的點,畢竟閱讀一段代碼的注意力在前部與尾部是最高的。

上一篇
騎士:Guard Clauses
下一篇
驚喜:Ternary與Switch
系列文
被討厭的前端實務手冊|JS x TS x React18
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言