【前端開發】FP 基礎:純函式 & 柯里化

更新 發佈閱讀 5 分鐘

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 前我們可能會這樣寫:

raw-image

或者是:

raw-image

上述這些程式碼會有幾個狀況:重複程式碼函式內一次性做太多事,如果我只要取得指定商品的打折價,就必須再計算一次,或是取得其他商品的打折數,這樣就很容易產生副作用,甚至是預期外的結果。

現在我們使用純函式寫一個打折器:

raw-image

這樣是不是乾淨許多呢?除了純函式外,在 FP 中我們還會使用另外一個工具:「柯里化」來管理我們的程式碼。


什麼是「柯里化」?

其實最初科里化(Currying)是一個數學理論,後續才由 Haskell Curry 發揚光大,故名「Currying」。

科里化的核心概念是將函式要帶入的多個參數,轉換為一次性帶入一個參數,舉例來說:

raw-image

這麼做有什麼好處呢?讓我們來看看科里化與純函式相比有什麼好處:

  1. 可以把程式法切的更碎片,提高複用性,例如:可以固定第一個、第 n 個參數的值,根據需求將關注點放在需要放的地方。
  2. 因為一次只傳入一個參數,降低傳入參數數量的錯誤

難道上述兩個優點純函式做不到嗎?是的純函式還真的做不到,讓我們直接來看範例比較:

raw-image

我們會發現若是透過純函式固定第一個參數,其實沒什麼意義,因為我們還是會不斷重複帶入同樣的參數,光是上方的程式碼,就足以想見未來若是要重複使用函式,未經科里化的純函式程式碼會越來越多。

以上就是 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

留言
avatar-img
Vivian Yeh - 跨領域轉職的軟體工程師
460會員
103內容數
為了追求可以窩在座位上、可以心無旁騖思考問題、座位可以亂七八糟沒關係、不需要到處哈腰點頭跑客戶,不用腳踩十公分、連妝都可以不用化的職場人生,文組少女毅然決然踏上RD的養成日常。
2024/05/23
與 cookie 相比,localStorage 與 sessionStorage 的機制相對單純,兩者皆是瀏覽器中的儲存空間,與 cookie 最大的不同在於:localStorage 與 ⋯⋯
Thumbnail
2024/05/23
與 cookie 相比,localStorage 與 sessionStorage 的機制相對單純,兩者皆是瀏覽器中的儲存空間,與 cookie 最大的不同在於:localStorage 與 ⋯⋯
Thumbnail
2024/05/22
在瀏覽器環境中有許多的儲存空間,想要查看這些空間的話,可以透過「chrome > Dev Tools > Application > Storage」即能進行查看。 瀏覽器內存空間的差異不僅常常被拿來被當作面試考題,在實務開發中更扮演舉足輕重的角色,今天就想透過這系列的文章深度了解這些瀏覽器內存⋯
Thumbnail
2024/05/22
在瀏覽器環境中有許多的儲存空間,想要查看這些空間的話,可以透過「chrome > Dev Tools > Application > Storage」即能進行查看。 瀏覽器內存空間的差異不僅常常被拿來被當作面試考題,在實務開發中更扮演舉足輕重的角色,今天就想透過這系列的文章深度了解這些瀏覽器內存⋯
Thumbnail
2024/02/20
上一篇文章分享了 TypeScript 的定義、前端角色定位,如果你不是很確定「TypeScript 是什麼?」、「TypeScript 作為 JavaScript 的超集,在網頁開發扮演怎麼樣的角色?」這兩個問題的答案,建議可以回到上一篇先了解一下。
Thumbnail
2024/02/20
上一篇文章分享了 TypeScript 的定義、前端角色定位,如果你不是很確定「TypeScript 是什麼?」、「TypeScript 作為 JavaScript 的超集,在網頁開發扮演怎麼樣的角色?」這兩個問題的答案,建議可以回到上一篇先了解一下。
Thumbnail
看更多
你可能也想看
Thumbnail
在 vocus 與你一起探索內容、發掘靈感的路上,我們又將啟動新的冒險——vocus App 正式推出! 現在起,你可以在 iOS App Store 下載全新上架的 vocus App。 無論是在通勤路上、日常空檔,或一天結束後的放鬆時刻,都能自在沈浸在內容宇宙中。
Thumbnail
在 vocus 與你一起探索內容、發掘靈感的路上,我們又將啟動新的冒險——vocus App 正式推出! 現在起,你可以在 iOS App Store 下載全新上架的 vocus App。 無論是在通勤路上、日常空檔,或一天結束後的放鬆時刻,都能自在沈浸在內容宇宙中。
Thumbnail
vocus 慶祝推出 App,舉辦 2026 全站慶。推出精選內容與數位商品折扣,訂單免費與紅包抽獎、新註冊會員專屬活動、Boba Boost 贊助抽紅包,以及全站徵文,並邀請你一起來回顧過去的一年, vocus 與創作者共同留下了哪些精彩創作。
Thumbnail
vocus 慶祝推出 App,舉辦 2026 全站慶。推出精選內容與數位商品折扣,訂單免費與紅包抽獎、新註冊會員專屬活動、Boba Boost 贊助抽紅包,以及全站徵文,並邀請你一起來回顧過去的一年, vocus 與創作者共同留下了哪些精彩創作。
Thumbnail
【Kotlin 入門指南】系列文章目錄:https://bit.ly/3t8awwL Kotlin 線上課程教學影片:https://bit.ly/3qJ5a5Q 整數與浮點數 在 Kotlin 中,整數和浮點數可以進行基本的數學運算,如:加、減、乘和除法等。 資料類型宣告方式 方法一
Thumbnail
【Kotlin 入門指南】系列文章目錄:https://bit.ly/3t8awwL Kotlin 線上課程教學影片:https://bit.ly/3qJ5a5Q 整數與浮點數 在 Kotlin 中,整數和浮點數可以進行基本的數學運算,如:加、減、乘和除法等。 資料類型宣告方式 方法一
Thumbnail
這一篇會介紹非常重要的 JavaScript 函式概念 - 高階函式(Higher-order function),高階函數是將一個或多個函數作為參數,或將一個函數作為結果返回的函數。在本文中,我們將深入探討什麽是高階函數、使用高階函數的好處以及如何在實際應用中使用高階函數,函式導向是什麼?
Thumbnail
這一篇會介紹非常重要的 JavaScript 函式概念 - 高階函式(Higher-order function),高階函數是將一個或多個函數作為參數,或將一個函數作為結果返回的函數。在本文中,我們將深入探討什麽是高階函數、使用高階函數的好處以及如何在實際應用中使用高階函數,函式導向是什麼?
Thumbnail
這篇文章將會介紹函式(Function)及其回傳值(retrun)的定義及介紹。
Thumbnail
這篇文章將會介紹函式(Function)及其回傳值(retrun)的定義及介紹。
Thumbnail
這篇文章將會介紹運算式與程式碼小知識,並介紹Switch-case這常用的陳述式,並提供範例的程式碼。
Thumbnail
這篇文章將會介紹運算式與程式碼小知識,並介紹Switch-case這常用的陳述式,並提供範例的程式碼。
Thumbnail
這篇文章為介紹C#基礎知識的一部分,如果你是直接開始寫程式的C#程式員,可以看看這篇文章補足一些基礎知識。
Thumbnail
這篇文章為介紹C#基礎知識的一部分,如果你是直接開始寫程式的C#程式員,可以看看這篇文章補足一些基礎知識。
Thumbnail
雜湊演算法(hash function)。或許你聽過它,但你是否了解它?劍術大師都說要人劍合一了,若是資訊人員不能人與技術合一,那要如何登峰造極?我們必須正確的使用它,才能讓它變成你的武器。 縮圖來源:https://www.pexels.com/zh-tw/photo/53207/
Thumbnail
雜湊演算法(hash function)。或許你聽過它,但你是否了解它?劍術大師都說要人劍合一了,若是資訊人員不能人與技術合一,那要如何登峰造極?我們必須正確的使用它,才能讓它變成你的武器。 縮圖來源:https://www.pexels.com/zh-tw/photo/53207/
Thumbnail
統全數理功用: 1.方便計算機計算過程直觀化,透過時輪系統,一步一步地理解計算過程 2.數理語言的統一規則化 3.可能方便初學者逐步理解   算法案例   二元算法 統全數理法化   次方/平方/立方.次方根,如何計算對數?   算法案例:加法與減法   算法案例:乘法除法
Thumbnail
統全數理功用: 1.方便計算機計算過程直觀化,透過時輪系統,一步一步地理解計算過程 2.數理語言的統一規則化 3.可能方便初學者逐步理解   算法案例   二元算法 統全數理法化   次方/平方/立方.次方根,如何計算對數?   算法案例:加法與減法   算法案例:乘法除法
Thumbnail
函式(Function)、傳值法、傳位址法、傳參考法
Thumbnail
函式(Function)、傳值法、傳位址法、傳參考法
Thumbnail
本文詳述模板設計的思路以及仔細講解函數分析,作者本人是文組背景,非常明白函數這個在 Notion 中最需要學習成本的項目帶來的痛點,本文即使函數小白也能輕鬆看懂。本文介紹format()函數、add()函數、 concat()函數和floor()。
Thumbnail
本文詳述模板設計的思路以及仔細講解函數分析,作者本人是文組背景,非常明白函數這個在 Notion 中最需要學習成本的項目帶來的痛點,本文即使函數小白也能輕鬆看懂。本文介紹format()函數、add()函數、 concat()函數和floor()。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News