進階 Pro ⏱ 30:00
05-3 (付費) 函數式編程:Pipe, Compose 與純粹性
(Pro) 將你的函數提升至藝術等級。學習純函數、副作用控制、以及利用 Pipe/Compose 構建聲明式代碼。
05-3 (付費) 函數式編程:Pipe, Compose 與純粹性
👋 **老師的話 (Script)**:
"歡迎來到最高層次。
在大型專案中,最恐怖的事情就是:你改了一個函數 A,結果遠在天邊的物件 B 竟然壞掉了。 這就是所謂的『副作用 (Side Effects)』。
這一章我们要學的是如何把程式碼寫得像數學公式一樣:給特定的輸入,永遠產出特定的輸出。 當你的函數變得『純粹』,你的程式就變得極易測試、極易預測。“
1. 純函數 (Pure Functions)
一個純函數必須滿足兩個條件:
- 確定的結果:給一樣的輸入,永遠得到一樣的輸出。
- 無副作用:不改動外部變數、不發送網路請求、不印 console (嚴格來說)。
// ❌ 不純:依賴外部變數
let tax = 0.05;
const calc = (price) => price * tax;
// ✅ 純:依賴傳入的參數
const calcPure = (price, tax) => price * tax;
2. 聲明式編程:Pipe 的概念
雖然 JS 官方的 |> (Pipeline) 提案還沒正式定案,但在 2026 年,我們習慣用工具函式來模擬它。
目標:把資料像流水線一樣經過多個工廠。
const trim = (str) => str.trim();
const capitalize = (str) => str.toUpperCase();
const addExclamation = (str) => `${str}!`;
// 傳統寫法 (醜)
const result = addExclamation(capitalize(trim(" hello ")));
// 現代思維 (Pipe)
const pipe = (...fns) => (x) => fns.reduce((v, f) => f(v), x);
const processText = pipe(trim, capitalize, addExclamation);
console.log(processText(" hello ")); // "HELLO!"
3. 高階函數的綜合應用:撰寫自己的中介軟體 (Middleware)
學會了這些,你就可以像 Better Auth 或 Astro 一樣,寫出可高度組合的元件。
const withLogger = (fn) => (...args) => {
console.log(`正在呼叫 ${fn.name},参数是 ${args}`);
return fn(...args);
};
const secureAdd = withLogger((a, b) => a + b);
secureAdd(1, 2);
🧪 Lab 09: 流水線大賽
請設計三個小型函數:
double, square, minusOne。
試著用 pipe 把一個數字 5 依序經過這三個函數。結果應該是 (5*2)^2 - 1 = 99。