What's Functional Programming

A programming paradigm where programs are constructed by applying and composing functions. It is a declarative programming paradigm in which function definitions are trees of expressions that each return a value, rather than a sequence of imperative statements which change the state of the program. - wiki

看不懂維基解釋很正常，基本上 Functional Programming (之後為了方便都盡量簡稱 FP) 就是

• Style / Pattern 一種撰寫風格
• Paradigm 一種規範
• Mindset 抽象式思維

所以 FP 不是一種 “程式語言”，也與框架無關，以 JS 來說，不管你是用 Vue、React、Angular、原生 JS 都是可以用 FP 思維去撰寫的。

學習曲線

學 FP 很像是自己學烘焙

• 一開始花很多錢買器具，也花了很長時間練習 (Pizza 麵團我可是做第三次才成功)
• 漸漸上手後，覺得也太好玩了! 做了一堆烘焙點心然後狂推別人入烘焙坑
• 別人開始覺得你很瘋狂，檸檬塔、各式麵包、瑪德蓮什麼都難不倒我，再也不吃隨便麵包店做的點心因為覺得難吃

雖然 FP 一開始的學習曲線真的頗高（要花許多時間理解），但是很快可以嚐到甜頭，尤其是在開發中大型專案時，不管維護或加功能都很容易。

為何要學? 舊思維不好在哪

想學一個新東西之前，一定是因為舊有方式出現一些問題所以才想用新思維 / 撰寫風格 / 工具 / 框架 解決。

大家可能都有遇過，小案子寫起來很順沒有什麼太大問題，但當系統越變越複雜，就會發現難以維護、執行 DRY (Don't Repeat Yourself) 很困難、總是花很多時間 debug、不知道怎麼寫測試，甚至出現改 A 壞 B，改 B 又壞 C 的狀態。

(圖來自 J.H. Blog)

無法執行 DRY / 很難共用

因為一個函式包含非常多功能，所以很難共用也容易出現重覆。例如若需要寫有兩個函式， transform1 的 input 是一個字串，output 要轉成全大寫; transform2 的 input 也是一個字串，output 要轉成全小寫。

/** 
@parm {string} str
@return {string} - 全大寫
*/
const transform1 = (str) => {}


/** 
@parm {string} str
@return {string} - 全小寫
*/
const transform2 = (str) => {}

用以前思維大略會長以下

// Old Way
const transform1 = (str) => {
  if(typeof str === 'string'){
    return `${str.toUpperCase()}!`; 
  }
  return 'Not a string'
}

const transform2 = (str) => {
  if(typeof str === 'string'){
    return `${str}!`; 
  }
  return 'Not a string'
}

transform1('hello world'); // "HELLO WORLD !"
transform2('hello world'); // "hello world !"

發現很多地方都重覆了，就算有心想做 DRY ，在新增功能時也會一直需要修改到 transformX 函式。

FP 精華就是會盡量抽象化 (抽象化時命名很重要，最好是一看函式名稱就知道在做什麼) 並拆分成最小單位。一開始也許會覺得多餘，但 FP 中每一個 function 都是可以再利用的 (Reusable)，在中大型專案尤其好用 (畢竟你永遠無法知道未來需求會變多複雜)

// FP
const toUpper = str => str.toUpperCase()  
const exclaim = str => str + '!'
const isString = str => typeof str === 'string' ? str : 'Not a string'

let transform1 = pipe(
  isString,
  toUpper,
  exclaim
)

let transform2 = pipe(
  isString,
  exclaim
);

transform1('hello world'); // "HELLO WORLD !"
transform2('hello world'); // "hello world !"

系統難以維護與測試

以前自己寫的 function 不是 Pure 的，也就是同樣輸入輸出的卻可能不同，所以當系統一大你也不會知道是哪個 Function 裡的哪一行導致 state 的改變

var state = ['apple', 'banana', 'cherry']

function A () {
  const s = state.reverse()

  return s;
}

function grabCherry () {
  // ...省略 100 行
  return state[2];
}
// 
grabCherry() // 'cherry'
A();
grabCherry() // 'apple'

而在 FP 世界永遠秉持 "One input, one output"，不管輸入幾次同樣值，回傳結果永遠相同。單就這個可預測的特性，就很好寫測試並且 debug 時也會容易很多。

難以閱讀

一有判斷就是 if 、 while 、 for 、 switch 用到底，判斷一多就會變成難以閱讀的窘境。接手別人專案往往要花很多時間理解別人在寫什麼

function calculationBMI(bmi
  if(bmi < 0) {
    return '資料錯誤'
  } else if(bmi < 18.5) {
    return '過輕'
  } else if(bmi >= 18.5 && bmi < 24) {
    return '正常'
  } else if(bmi >= 24 && bmi < 27) {
    return '過重'
  } else if(bmi >= 27 && bmi < 30) {
    return '輕度肥胖'
  } else if(bmi >= 30 && bmi < 35) {
    return '中度肥胖'
  } else{
    return '重度肥胖'
  }
}

calculationBMI(20); // '正常'

如果改成 FP，就算是過三個月回來看或接手別人的 code 也很了解這個函式在做什麼

// match 函式先省略
const lessThan = x => bmi => bmi< x ;

const calculationBMI = BMI => 
match(BMI)
.on(lessThan(0), () => '資料錯誤')
.on(lessThan(18.5), () => '體重過輕')
.on(lessThan(24), () => '正常')
.on(lessThan(27), () => '過重')
.on(lessThan(30), () => '輕度肥胖')
.on(lessThan(35), () => '中度肥胖')
.otherwise(() => "重度肥胖")


calculationBMI(20); // '正常'

FP 使用大量的 Function，幾乎每個 Function 都可以由更小的 Function 組合出來，例如 lessThan，這樣好處是可以減少程式碼的重複，所以 FP 的寫法通常比較簡短跟容易。統整 FP 的好處就是

容易理解、容易改變、容易除錯和具有彈性

看完以上，有沒有讓你覺的想要學 FP 了呢?

參考文章

• Master the JavaScript Interview: What is Functional Programming?
• Why Functional Programming?

如有錯誤或需要改進的地方，拜託跟我說。
我會以最快速度修改，感謝您

歡迎追蹤我的部落格，除了技術文也會分享一些在矽谷工作的甘苦。