iT邦幫忙

2023 iThome 鐵人賽

DAY 19
0
自我挑戰組

React Clean Code And Unit Tests - 利用測試寫出人類看得懂的React程式系列 第 19

Day 19 - 可以試著用在專案的 Functional Programing 觀念 part 2

  • 分享至 

  • xImage
  •  

Immutability

當我們說一個物件是 Immutable ,那就表示這個物件在被產生之後,就無法再被修改了,在JS中如果你是用 const 宣告的就代表他是一個 Immutability

const data = 'data' ;
data = 'newData'

// error TypeError: "data" is read-only

補充一下,如果 const 宣告的是 object 但你可以去更改內部的 key的 value 原因是 object 為 Reference data types ,如需更了解請搜尋關鍵字 primitive data types 、 reference data types

那 Immutable 有什麼好處呢?

最大的用處是在 平行化運算 的時候,大家在學程式的時候應該都有學到很重要的一個觀念吧,不用動到原始資料,這也是為什麼我們盡量不要去用 var 宣告變數,有可能會導致其他 function 污染了他應該要有的狀態。

在處理陣列資料時也都是用 slice() 而非 splice() ,在平行化運算時,都會需要變數原始的狀態,在平行化運算如果共享一個可變變數,那可能出現大魔王等著你打也說不定。

Compose

複合函式 (Functional Composition):
如何組合兩個以上的函式並依照組合的順序去產生另外一個新的函式
感覺不是很好懂,上一下小小的公式

https://chart.googleapis.com/chart?cht=tx&chl=y%20%3D%20g%20(x)%20%5C%5C%20z%20%3D%20f(y)%20%5C%5C%20z%3Df(g(x))

// 以程式表達

const compose = (f,g) => x => f(g(x))

舉例來說,我們想要表現 1 + 2 * 3 的話

你可以

function addMult(a,b,c){
	return a + b * c 
}

console.log(addMult(1,2,3))

用 composition 可以寫成

function add(a, b){
	return a + b;
}

function mult(a, b){
	return a * b;
}

console.log( add(1, mult(2, 3)) )

使用 compose 的好處有什麼 ?

  • 可以有效減少 function 需要的參數
  • 因為結合律的關係,會讓程式的彈性更高
  • 更清晰簡單的邏輯
  • 由於 function 被拆的更細,更利於維護

我個人認為學習 functional programing 也不用走火入魔的把現有專案全部改成 FP 的形式,最重要的是怎麼讓我們的專案變得更好讀、更好修改、更好除錯


上一篇
Day 18 - 那些可以試著用在專案的 Functional Programing 觀念 part 1
下一篇
Day 20 - React Compound Component Pattern
系列文
React Clean Code And Unit Tests - 利用測試寫出人類看得懂的React程式30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言