Grokking Simplicity FP CH10 ~ CH11

[MiJouHsieh]

《簡約的軟體開發思維：用 Functional Programming 重構程式》CH10 ~ CH11

筆記章節

1. CH 10 - 頭等函式 (1)
2. CH 11 - 頭等函式 (2)

筆記章節

• 日期：2025/05/29 @Tech-Book-Community
• 導讀人：Monica
• 筆記工：Mi
• Slider Here

---

第 10 章 頭等函式 (1)

章節回顧 Q & A

1. 什麼是「函式名稱中的隱性引數」？這種程式碼意味會造成什麼問題？

   • 「函式名稱中的隱性引數」:
     • 函式實作邏輯相似，
     • 有差異的地方出現在函式名稱上。用函式名稱的差異，來傳遞邏輯差異，並未實際傳入任何引數。
   • 造成程式碼重複、不利維護的問題。

2. 請說明「頭等物件」和「頭等函式」的定義，並舉一個 JavaScript 的例子

   • 在 JavaScript 中，函式是「頭等物件（First-Class Object）」，也稱為「頭等函式」，意思是
     函式可以像變數一樣被傳遞、指派、作為參數傳入其他函式、或作為函式回傳值。
   • 例如JavaScript 中的 map()和reduce()函式，都是高階函式，它們接受另一個函式作為參數，並對陣列中的每個元素進行操作。

3. 程式重構：觀察下列兩個函式，將它們構成一個更通用的高階函式，並簡述這樣做的好處。

   function printAllUppercase(strings) {
     for (var i = 0; i < strings.length; i++) {
       console.log(strings[i].toUpperCase());
     }
   }
   
   function printAllWithPrefix(strings, prefix) {
     for (var i = 0; i < strings.length; i++) {
       console.log(prefix + strings[i]);
     }
   }
   
   printAllUppercase(["foo", "bar"]);
   // FOO
   // BAR
   
   printAllWithPrefix(["foo", "bar"], ">> ");
   // >> foo
   // >> bar

   答

   兩個函式中， for 迴圈為重複部分，不同的地方為 console.log (主體實作)，不同的地方提取出，以 callback function 的方式傳入高階函式。

   function forEach(array, f) {
     for (var i = 0; i < array.length; i++) {
       var item = array[i];
       f(item);
     }
   }
   
   forEach(["foo", "bar"], function (str) {
     console.log(str.toUpperCase());
   });
   // FOO
   // BAR

   建立高階函式

   1. 將 for 迴圈寫入新函式中，因為處理陣列所以用通用名稱命名，例 function forEach
   2. printAllUppercase 和 printAllWithPrefix 兩個函式名稱中有隱性引數
   3. 新函式 function forEach 加入新參數 (array, f)，接收顯性引數
   4. 使用新參數 array、 f 取代原本兩個函式的固定值
   5. 更改呼叫新的函式

   好處：減少程式碼重複的邏輯。不同的主體實作都可透過高階函式處理。

4. 程式理解：請問下列程式碼的 withLogging 函式為什麼要傳入一個函式 (callback)，而不是直接傳入 saveUserData(user) ? 如果直接傳入會有什麼問題？

   function withLogging(f) {
     try {
       f();
     } catch {
       logToSnapErrors(error);
     }
   }
   
   withLogging(function () {
     saveUserData(user);
   });

   答

   • saveUserData(user)是若直接傳入，如 withLogging(saveUserData(user))，JavaScript 會先執行 saveUserData(user) ，在把回傳結果傳入withLogging()，這樣會導致呼叫地點無法在 try 區塊中執行。
   • 錯誤發生的時間點在 try/catch 區塊之外，就無法被捕捉。

   saveUserData(user) 包在匿名函式中，作為 callback function 當成引數傳入withLogging 函式，saveUserData(user)的執行才會在 try { f() } 區塊內執行，就能正確捕捉錯誤。

5. 請解釋什麼是「高階函式」(higher-order function)，以及為什麼「頭等函式」是實現「高階函式」的前提？

   • 高階函式可以接受其他函式作為參數傳入，或是可回傳函式的函式。
   • 函式必須為頭等物件，才能做傳遞，要有這樣前提才能寫出高階函式
   • 若函式不屬於頭等物件，函式就無法當資料操作，就無法實現高階函式。
   • 頭等物件可執行的操作：賦值給變數、作為參數傳入函式、作為函式的回傳值、可存入資料結構。

---

第 11 章 頭等函式 (2)

章節回顧 Q & A

1. 讓 try 和 catch 區塊都能執行不同程式碼，實作 tryCatch

   //將以下
   try {
     sendEmail()
   } catch (error) {
     logToSnapErrors(error)
   }
   
   //改成以下
   tryCatch(sendEmail, logToSnapErrors)

   答

   1. 把 try / catch 區塊擷取放入新的函式 tryCatch 中
   2. tryCatch 函式傳入的參數為變動的程式碼
   3. try 函式內變動的程式碼 sendEmail() 作為 tryCatch函式的第一個參數
   4. catch 函式內變動的程式碼 logToSnapErrors(error) 作為 tryCatch 函式的第二個參數
   5. 呼叫 tryCatch 函式時，把 2 個函式作為參數傳入

   // 書 練習11-3 解答
   function tryCatch(f, errorHandler) {
     try {
       return f();
     } catch (error) {
       return errorHandler(error);
     }
   }
   
   // 加 return - 把執行結果傳出來
   // 不加 return - 只執行函式，不需要結果

2. 以重構 2 將 if 敘述包裝成函式，實作 when(test, then)

   // 將以下
   if (array.length === 0) {  
     // test 語句
     console.log("Array is empty"); // then 語句
   }
   // 改成以下
   when(  
     array.length === 0, // test 語句
     function () {    
       console.log("Array is empty"); // then 語句
     },
   );

   答

   function when(test, then) {
     if(test) return then()
   }
   //return 是讓 when()函式可以回傳 then()的結果
   //若不需傳出 then() 的值，可以省略 return

   • 使用函式封裝條件邏輯
   • then 是 callback，只有在 test 為真時才會執行

3.請觀察以下程式碼，使用「以回呼取代主體實作」的重構模式，將重複的程式碼改寫成高階函式：

function addAndLog(a, b) {
  const result = a + b;
  console.log("計算結果:", result);
  return result;
}

function multiplyAndLog(a, b) {
  const result = a * b;
  console.log("計算結果:", result);
  return result;
}

答

共通邏輯可以抽成一個新函式 withLogging，且 withLogging 函式回傳一個函式，withLogging 函式接收的參數為函式(operation)，在呼叫withLogging 函式時可代入不同操作 (相加、相乘)

function withLogging(operation) {
  return function (a, b) {
    const result = operation(a, b);
    console.log("計算結果:", result);
    return result;
  };
}

const addAndLog = withLogging((a, b) => a + b);
const multiplyAndLog = withLogging((a, b) => a * b);

console.log(addAndLog(2, 3)); // 計算結果: 5
console.log(multiplyAndLog(2, 3)); // 計算結果: 6

4.撰寫 makeAdder() 高階函式，傳回可將兩數相加的新函式

// 使用方式
var increment = makeAdder(1);
increment(10); // 11

var plus10 = makeAdder(10);
plus10(12); // 22

答

兩個函式有重複的地方可以改寫成高階函式。

makeAdder 接收的參數為固定要加的值 (n)，透過閉包保存參數 n。
makeAdder 高階函式回傳一個函式，回傳的函式接收另一個參數(x)，進行相加後把值回傳。

// 書 練習11-7 解答
function makeAdder(n) {
  return function (x) {
    return n + x;
  };
}

5.請解釋什麼是「函式生成工廠」(function factory)，並用一個簡單例子說明。

函式生成工廠是指能產生新函式的函式。例如：

function makeGreeter(greeting) {
  return function (name) {
    return greeting + ", " + name + "!";
  };
}

const sayHello = makeGreeter("Hello");
const sayHi = makeGreeter("Hi");

console.log(sayHello("John")); // "Hello, John!"
console.log(sayHi("John")); // "Hi, John!"

makeGreeter 就是一個函式生成工廠，它接收一個問候語，回傳一個新的問候函式。