Functional Programming 筆記

subtitle: Ken 與 FP 的旅程 ~ 2021-03-31

前言

一直以來都是對 procedure programming 和 OOP 比較熟悉，粗略地知道 functional programming 的概念，也有使用這樣的程式設計法，但沒有再進一步了解，機緣下聽到了 Ken 的這場分享，以下是我聽完分享後的一些思考。

先來一段情境

（pipe）

賣場上有三種折價券：98 折、95 折、92 折，沒有限制，可以同時使用。

如果用程式表達這三種折價券可以用三個函式：

const useCoupon98 = x => x*0.98;
const useCoupon95 = x => x*0.95;
const useCoupon92 = x => x*0.92;

如果用 procedure programming 描述我用三張折價券買了一本書：

let book = 400;
let result = useCoupon98(book)
result = useCoupon95(book)
result = useCoupon92(book)

好像也沒有不對，但在這個情境裡，也許用 functional 的方法思考會更符合情境。因為折扣卷並沒有一定要先使用哪一張，但這樣的寫法默默地寫下了執行順序。

如果使用 functional prgramming，似乎會好一點：

let book = 400;
let useCoupons = (a,b,c) => x => a(b(c(x))); //為方便使用固定三個參數，可以改成不定參數
let useCoupons(useCoupon98,useCoupon95,useCoupon92)(book)

雖然這個 useCoupons 並不完美，它裡面的實作依舊是按照順序呼叫，但這個函式已經成功將使用折價券的過程封裝起來，對使用者來說只知道它可以接收折價券當參數。

所以第一種寫法不好嗎？

還記得剛開始學習函式時，學到使用函式可以減少重複的程式碼，讓程式碼更好維護。
另外，也能透過函式命名讓程式更好懂（封裝流程？）。

再來換個情境看看，現在要做一顆切換顏色的按鈕。

範例示範用原生 js 與一步一步將一顆按鈕掛進 container，與用 React hook 方法的差別

const container = document.getElementById('container')
const btn = document.createElement('button')
btn.className ="gray"
btn.onClick = function(e){
    if(this.classList.conatins('gray')){
       this.classList.remove('gray')
       this.classList.add('red')
   }else{
       this.classList.remove('red')
       this.classList.add('gray')
   }
}
container.appendChild(btn)

如果用流程的方式思考：

我們必須先創造出一顆按鈕，才能加上 class。
判斷狀態時必須先判斷是灰色才能改成紅色

如果有很多顆按鈕就不好維護這段判斷顏色的程式了，於是想把這段程式抽給函式也很合理：

const changeColor = (prevColor, activeColor) => {
    if(this.classList.conatins(prevColor)){
       this.classList.remove(prevColor)
       this.classList.add(activeColor)
   }else{
       this.classList.remove(prevColor)
       this.classList.add(activeColor)
   }
}

順便再加個變數。
很基本，所有學到函式與變數的人都能輕鬆做到。

const container = document.getElementById('container')
const btn = document.createElement('button')
btn.className ="gray"
btn.onClick = function(e){
    changeColor('gray','red')
}
container.appendChild(btn)

現在，可以來看看 React 在做的事，其實也就是把整個過程要用到的命令式寫法，都抽成函式。

const Container = (props) => {
    const [color, setColor] = useState('gray')
    const changeColor = () => {
        setColor( prevColor => prevColor === 'gray' ? 'red' : 'gray')
    }

    return (
        <button className="${color}" onClick={changeColor} >click</button>
    )
}

抽出函式這件事從很久以前就學過了，但以往是有大量重複的地方或流程很長才會想到用函式。
但 functional programming 的思考，似乎是沒有必要的命令（沒有順序分枝？）都應該抽成函式。

procedure 的方式，在控制流程分枝時相當好用。
但 if ... else ... 遇到狀態時，就相當棘手了。
在不需要流程控制時，應該以 functional programming 思考。functional progamming 會在前端流行起來，也許是做前端需要大量維護狀態。

大概吧。

有空再研究ㄌ