【前端開發】FP 基礎：純函式 ＆ 柯里化
閱讀時間約 4 分鐘
Functional Programming 中文譯作函式程式設計，或是功能性程式設計，常簡稱為：FP，是一種透過使用純函式（Pure Funciton）進行軟體開發，且避免副作用的程式設計典範，比起宣告式的流程控制，在 FP 採用主要以表達式的方式撰寫程式碼。
如果我們將 FP 這個設計典範的特點一一列點出來會有以下概念：
- 透過純函數（Pure Function）將函式封裝成函式最小單位
- 使用複合函數（Function Composition）提升函式的復用性
- 避免副作用（Side Effect）
- 使用表達式
接著就讓我們來看看什麼是純函式吧！
什麼是純函式？
純函式（Pure Funciton）在 FP 中是一個很核心的概念，在 FP 這個設計典範中，我們都會使用純函式的方式來撰寫我們的程式碼。
首先讓我們來看看純函式的定義：
- 單輸入單輸出（One input, one output）
- 不會造成任何副作用
那我們為什麼在 FP 中要使用純函式呢？我們希望可以讓程式碼的狀態不互相依賴，以免造成變數與變數間互相覆蓋的狀況。
更重要的是，我們同時也希望程式碼的覆用性可以更高，而不是在同個函式中，同時處理不同性質的任務，一旦這些任務重複性出現在不同的流程中，就會發現任務彼此之間過於耦合難以拆分，要擴充新的功能，就只能向樂高一樣繼續往上疊，或一改就要改到天荒地老的窘境。
除了開發過程可能變得沒有效率外，把程式碼當樂高疊的後果是，萬一未來有人不小心改到了某個地方，就很容易導致這個程式碼樂高塔輕易崩塌。
在 FP 中，我們傾向把任務拆分成最小最小的單位，並且透過函式來處理這些任務，而規則單純卻又嚴謹的純函式就成為 FP 最萬用的工具。
如果我們要寫一個簡單、但卻會重複出現的篩選邏輯，例如：將指定商品進行打折，沒有使用 FP 前我們可能會這樣寫：
或者是：
上述這些程式碼會有幾個狀況：重複程式碼、函式內一次性做太多事，如果我只要取得指定商品的打折價，就必須再計算一次，或是取得其他商品的打折數，這樣就很容易產生副作用，甚至是預期外的結果。
現在我們使用純函式寫一個打折器：
這樣是不是乾淨許多呢？除了純函式外，在 FP 中我們還會使用另外一個工具：「柯里化」來管理我們的程式碼。
什麼是「柯里化」？
其實最初科里化（Currying）是一個數學理論，後續才由 Haskell Curry 發揚光大，故名「Currying」。
科里化的核心概念是將函式要帶入的多個參數，轉換為一次性帶入一個參數，舉例來說：
這麼做有什麼好處呢？讓我們來看看科里化與純函式相比有什麼好處：
- 可以把程式法切的更碎片，提高複用性，例如：可以固定第一個、第 n 個參數的值，根據需求將關注點放在需要放的地方。
- 因為一次只傳入一個參數，降低傳入參數數量的錯誤
難道上述兩個優點純函式做不到嗎？是的純函式還真的做不到，讓我們直接來看範例比較：
我們會發現若是透過純函式固定第一個參數，其實沒什麼意義，因為我們還是會不斷重複帶入同樣的參數，光是上方的程式碼，就足以想見未來若是要重複使用函式，未經科里化的純函式程式碼會越來越多。
以上就是 FP 設計典範中最基礎也是最廣為人知的概念，不過 FP 的概念不僅僅於此，如果你有興趣的話，可以參考我在 2022 第十四屆 iThome 鐵人賽《致 JavaScript 開發者的 Functional Programming 新手指南》。
在這系列文章中，除了介紹 Functional Programming 這門設計典範外，也包含了要習得 FP 技術前所必備的 JavaScript 基礎知識，及一些 FP 在前端的演進史。
希望透過這篇文章的分享，可以讓大家簡單了解那些前端開發者常說的 Pure Function 及 Curry 是什麼，關於 Functional Programming 你有什麼想要跟我分享的嗎？歡迎下方留言與我分享！
希望今天的文章有幫助到正在閱讀的你，如果你喜歡我的文章的話，可以留下你的愛心或是收藏我的文章，也或者可以點選「贊助」，你的一杯咖啡絕對是我持續寫下去的動力！或是透過拍拍手，用你小小的行動支持我的創作！
我是Vivian，我們下次見。
關於我：
一名從英文系畢業的前端工程師，喜歡閱讀、寫東西及自我成長。
｜Instagram: Vivian Yeh｜vivian_enlife
｜聯絡我：vivian.enlife@gmail.com
422會員
99內容數
為了追求可以窩在座位上、可以心無旁騖思考問題、座位可以亂七八糟沒關係、不需要到處哈腰點頭跑客戶，不用腳踩十公分、連妝都可以不用化的職場人生，文組少女毅然決然踏上RD的養成日常。
留言0
查看全部
你可能也想看
Google News 追蹤
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Hi 大家好，我是Ethan😊
相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。
曾經，我的保養程序簡單到只包括清潔和隨意上乳液
完成後端基本功能並通過驗收後，我們開始使用 Nuxt 架設個人財務管理系統的前端。Nuxt 基於 Vue，學習曲線平緩且配置簡單，適合不同程度的開發者。透過 Docker，我們快速建立了 Nuxt 開發環境，並搭建首頁和交易紀錄頁面，整合 Tailwind CSS 提供美觀的 UI。
在軟體開發領域中，Backend 和 Frontend 是兩個常被提及的術語。許多同學常常問我，到底是 Backend 比較難還是 Frontend 比較容易？
上一篇文章分享了 TypeScript 的定義、前端角色定位，如果你不是很確定「TypeScript 是什麼？」、「TypeScript 作為 JavaScript 的超集，在網頁開發扮演怎麼樣的角色？」這兩個問題的答案，建議可以回到上一篇先了解一下。
前言
現在的前端需求已經越來越高，要考慮HTML及CSS的切版美觀程度，以及React以及Flutter所提出的元件(Componet、widget)觀念，也就是將元件模組化，使元件可以更動態的被程式運行，而不用靜態的客製化每一個介面。開發一個好的元件可以提升整體的開發速度，讓任何使用元件的開發者
前端開發者常會遇到需要網頁素材的情況，雖然在公司中都可能有可以配合的平面設計師或是UIUX設計師，但在這個多工高效的時代不免也需要前端開發者也可以處理簡單的設計，也可提升設計審美或與設計師溝通的能力。
然而前端開發者也算是擁有設計師的天賦，透過程式碼來完成平面設計，將網頁的每個介面都視為平面設計，
C2 開始終於使用到 visual studio code，
這個階段學到 JavaScript 核心概念、DOM 操作、API 串接、MVC 架構，
每天都在 coding，每週都在追進度，
用壓縮到極致的時間寫完作業，
但跟著課程內容寫程式碼，真的有學到嗎？
有，吧。
畢竟在寫最後的電影清單
今天想透過這篇文章與各位分享如何透過 Chrome Devtool 的 Performance Tab 來檢測網頁在執行時的各種效能指標，讓網頁的 Runtime Performance 不再成為你 debug 時的瓶頸！
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Hi 大家好，我是Ethan😊
相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。
曾經，我的保養程序簡單到只包括清潔和隨意上乳液
完成後端基本功能並通過驗收後，我們開始使用 Nuxt 架設個人財務管理系統的前端。Nuxt 基於 Vue，學習曲線平緩且配置簡單，適合不同程度的開發者。透過 Docker，我們快速建立了 Nuxt 開發環境，並搭建首頁和交易紀錄頁面，整合 Tailwind CSS 提供美觀的 UI。
在軟體開發領域中，Backend 和 Frontend 是兩個常被提及的術語。許多同學常常問我，到底是 Backend 比較難還是 Frontend 比較容易？
上一篇文章分享了 TypeScript 的定義、前端角色定位，如果你不是很確定「TypeScript 是什麼？」、「TypeScript 作為 JavaScript 的超集，在網頁開發扮演怎麼樣的角色？」這兩個問題的答案，建議可以回到上一篇先了解一下。
前言
現在的前端需求已經越來越高，要考慮HTML及CSS的切版美觀程度，以及React以及Flutter所提出的元件(Componet、widget)觀念，也就是將元件模組化，使元件可以更動態的被程式運行，而不用靜態的客製化每一個介面。開發一個好的元件可以提升整體的開發速度，讓任何使用元件的開發者
前端開發者常會遇到需要網頁素材的情況，雖然在公司中都可能有可以配合的平面設計師或是UIUX設計師，但在這個多工高效的時代不免也需要前端開發者也可以處理簡單的設計，也可提升設計審美或與設計師溝通的能力。
然而前端開發者也算是擁有設計師的天賦，透過程式碼來完成平面設計，將網頁的每個介面都視為平面設計，
C2 開始終於使用到 visual studio code，
這個階段學到 JavaScript 核心概念、DOM 操作、API 串接、MVC 架構，
每天都在 coding，每週都在追進度，
用壓縮到極致的時間寫完作業，
但跟著課程內容寫程式碼，真的有學到嗎？
有，吧。
畢竟在寫最後的電影清單
今天想透過這篇文章與各位分享如何透過 Chrome Devtool 的 Performance Tab 來檢測網頁在執行時的各種效能指標，讓網頁的 Runtime Performance 不再成為你 debug 時的瓶頸！