前言

今天會繼續來聊聊 FP 的一些重要觀念，而且會更偏向實際的做法，看看 Javascript 怎麼結合昨天聊到的 First-class、HoF、pure function，並且落實「以 function 為主體」來寫程式。

Imperative vs. Declarative

新手們通常看到這兩個單字就直接轉台了，如果你成功看到第二行，我會盡量講清楚來報答你(?)。

Imperative

中文翻成命令式，是一個胼手胝足、努力向上的好青年，他做事的每一個步驟你都看在眼裡，他關注的是細節，是「如何做到」。

const arr = [
    { id: 'item1', name: 'TV', price: 13500 },
    { id: 'item2', name: 'washing machine', price: 8200 },
    { id: 'item3', name: 'laptop', price: 25000 },
];

let totalPrice = 0;
arr.forEach(item => {
    if(item.price > 10000) {
        totalPrice += item.price;
    }
});

Declarative

中文翻成宣告式，是主管的類型，在公司的重要會議裡面，他只會告訴你大方向及一些策略，他關注的是整體，是「要做什麼」。

const arr = [
    { id: 'item1', name: 'TV', price: 13500 },
    { id: 'item2', name: 'washing machine', price: 8200 },
    { id: 'item3', name: 'laptop', price: 25000 },
];

const totalPrice = arr.filter(item => item.price > 10000)
                      .map(item => item.price)
                      .reduce((prev, curr) => prev + curr, 0);

兩者差異

有沒有覺得上面兩個範例有點眼熟。。。沒錯就是我們在 Day 2 - Array 陣列組合技 (1) 討論到的，關於 forEach v.s. 聯合軍(filter/map/reduce) 的寫法。

當時提到了會有效能與可讀性方面的 trade-off，但沒有特別提到命令式與宣告式，因為我忘了我想讓大家多感受一些陣列與物件的用法，等到現在正式來討論 FP 的時候，才不會覺得越級打怪。

現在是不是覺得很多線索都串連起來了？

雖然 forEach 比起一般的 for 迴圈來說，已經算是比較偏向宣告式了，當你看到 forEach 這個關鍵字的時候，你會立馬知道：

• forEach：我要跑迴圈，而且會把陣列中每個元素跑過一遍

但比起聯合軍(filter/map/reduce)的成員來說，他們更宣告了一點，因為每個都更明確告訴你：

• filter：我不只要跑迴圈，還要做一個篩選的動作
• map：我不只要跑迴圈，還要做一個轉換的動作
• reduce：我不只要跑迴圈，還要做一個整合的動作

誰好誰壞？

首先，沒有好壞，雖然很多人比較想當主管，但那只是個擬人的形容，不要太入戲，兩種都是程式寫法的差異罷了，之前在 Day 2 也討論過，有些時候選擇不同的寫法都只是 trade-off 而已，沒有絕對正確的答案。

不過正是因為沒有正確答案，才更要去理解，這兩種的擅長點各自在哪，才能夠在對的地方發揮出來。

屠龍寶刀雖然厲害，但對於豬肉販來說，一般的鐵菜刀反而更順手。
如果我是豬肉販，我會選屠龍寶刀，然後賣掉買很多把鐵菜刀((拖走

Currying

籃球迷要瘋狂了！咖哩控也要暴走了！怎麼學 FP 還有球可以打有咖哩可以吃，原來是來源於一位邏輯學家叫做 Haskell Curry。

currying 其實是一種數學方法，只是套用到 FP 來用，他的重點在於將 function 的「多個參數轉成單個參數」。

直接舉個例，原本要把兩個數字相加，需要帶兩個參數進去：

const addNum = (x, y) => x + y;

使用 currying 方法轉換之後會變成

const addNum = x => y => x + y;

有沒有很眼熟？我們在 Day 8 - Functional Programming 初探 (1) 就看到這種寫法了，但沒有特別提 currying，因為我忘了當時主要在講 HoF，但也透過同樣一個範例了解到，其實我們能夠使用 currying 方法，都多虧了 HoF 呢！

但這乍看之下完全是多此一舉吧！要相加就丟兩個參數啊，何必變成一個？

沒錯，如果我們真的只有「相加」一個函式，那大可用第一種方法就好，但當我們要開始寫 FP，別忘記主體是 function，最小單位是 function，基本上做什麼都要從 function 去排列組合。

function 的拆解與組裝

currying 絕對是 FP 非常重要的一步，因為有了 currying，我們才可以將 function 拆成比較小的積木，然後用這些積木去「組裝」更多 function：

const addNum = x => y => x + y;

const addFive = addNum(5);
const addTen = addNum(10);

addFive(3); // 8
addTen(3); // 13

看起來很複雜，但如果發揮前面學到 Declarative 的精神，先不要那麼在意這些程式碼每一步動作，而是先看出這些英文的意圖：

// 這邊有個函式，addNum 應該就是把數字加起來吧？
const addNum = x => y => x + y;

// 這邊有個變數不知道存什麼東西，但它叫 addFive，應該就是用來 +5 吧？
const addFive = addNum(5);
// 這邊有個變數不知道存什麼東西，但它叫 addTen，應該就是用來 +10 吧？
const addTen = addNum(10);

// addFive 是 +5，還放了一個 3 進去，那大概是 8 吧？
addFive(3); // 8
// addTen 是 +10，還放了一個 3 進去，那大概是 13 吧？
addTen(3); // 13

沒錯，英文不好來學 FP 好像真的比較吃虧XD

離題了，重點是透過 currying，我們可以創造小積木，然後把小積木組成中積木，最後再堆成一整個城堡(生產線)。

pipe & compose

「組合」function 的兩大支柱，可以把兩個或多個 function 組合成像生產線一樣，A 執行完丟給 B，B 再接續執行。

直接上語法，如果要組合兩個 function：

const pipe = (f, g) => (...args) => g(f(...args));
const compose = (f, g) => (...args) => f(g(...args));

pipe 是先左再右，compose 是先右再左，所以兩者基本上是挑一個來用即可：

const pipe = (f, g) => (...args) => g(f(...args));
const compose = (f, g) => (...args) => f(g(...args));

const multiplyBy3 = num => num * 3;
const makePositive = num => Math.abs(num);
const multiplyBy3AndPositive = pipe(multiplyBy3, makePositive);
// 等同於
// const multiplyBy3AndPositive = compose(makePositive, multiplyBy3);

multiplyBy3AndPositive(-5); // 15

可以看到 multiplyBy3AndPositive 是一個完全透過「組裝」製造的 function，有順序地執行裡生產線裡面的兩個 function，開始有 FP 的感覺囉！

這部份我們明天會有大量可以實戰的案例！敬請期待

結語

今天介紹的東西其實滿難的，一方面是因為 FP 本來就充滿了許多數學元素，另一方面，當這些都只是概念的話，也很難跟實際的案例結合，但直接上實戰又好容易死在路上QQ

所以今天先介紹概念們，明天我們集合這兩天的大成，試著應用在實戰吧！

從合成到分離
從原子到宇宙
連結了散落一地的星點

參考資料

hannahpun - Function Programming In JS