第 12 屆 iThome 鐵人賽

DAY 3

Software Development

Functional Programming in JS系列第 3 篇

Buzz Word 1 : Declarative vs. Imperative

12th鐵人賽

hannahpun

2020-09-03 02:21:07

22509 瀏覽

分享至

前一篇算是站在一個 High Level 角度大略說明 FP 好處，這一篇開始會有一系列 Buzz Words for FP 的介紹，這些專有名詞也算是讓新手卻步的門檻，但其實沒有這麼難，我覺得比較像是用不同角度去解釋類似的事情。

Declarative 宣告式 vs. Imperative 命令式

Functional programming 是 Declarative Paradigm 的代表，邏輯為用較為抽象的程式碼，理解程式碼想要達到怎樣的目標，Function 之間不會互相共用 state 狀態，而 Imperative 代表 OOP 比較容易寫出狀態互相依賴的程式碼。

Imperative is How to do stuff

Imperative programming is a programming paradigm that uses statements that change a program's state.

著重在 HOW，具體表達程式碼該做什麼才能達到目標，比較像我以前撰寫程式的思維，程式一步一步按著順序照著你給他指示執行。Imperative 比較常運用 Statement ，也就是 if , while , for , switch 等。

Example: OOP
Stateful
Can mutate state
常會有 Side Effect 發生

Declarative is What's stuff

Declarative programming is a programming paradigm that expresses the logic of a computation without describing its control flow.

著重在該做什麼 WHAT ，並採取抽象化流程。Declarative 比較常運用表達式 expression，表達式特色是單純運算並一定會有返回值

Example: FP
Stateless: 你只要專心於當前算式，結束後再也不用管他
Constants, immutability
No Side Effect

舉一個例子，將 Array 加總

// Imperative is How to do stuff
var array = [3,2,1]
var total = 0
for( var i = 0 ; i <= array.length ; i ++ ){
    total += array[i]
}

可以看到上面是一個運算的過程，著重 "如何" 達到預期結果！

// Declarative is What's stuff
var array = [3,2,1]
array.reduce( function( previous, current ){ 
    return previous + current 
})

Declarative 則是可以直接知道做了 "什麼"，恩，看不太出來 Declarative 的好處啊?
我再舉一個更複雜的例子，今天有一個函式 doStuff ，input 是一個字串 'Welcome to FP world '，需要

轉小寫、去掉空格 welcome to fp world
輸出個別字串長度 > 3 字元的字串 welcome world
反轉 world welcome

// Imperative is How to do
// 'Welcome to FP world'
const doStuff = str => {
  const lower = str.toLowerCase()  // 'welcome to fp world'
  const words = lower.split('') // ['welcome', 'to', 'fp', 'world']
 
  words.reverse() // ['world', 'fp', 'to', 'welcome']
 
  for(let i in words) {
    words[i] = words[i].trim()
  } // ['world', 'fp', 'to', 'welcome']
 
  let keepers = []
 
  for(let i in words) {
    if(words[i].length > 3) {
      keepers.push(words[i])
    }  // ['world', 'welcome']
  }
 
  return keepers.join(' ') // 'world welcome'
}

doStuff('Welcome to FP world')

以上可以看到他照著需求一步一步達到目標，中間也是用到很多 statement 跟共用 state (eg. keepers)。

// Declarative is What's xxx
// 'Welcome to FP world'
const doStuff = _.compose(
  join(' '),
  _.filter(x => x.length > 3),
  reverse,
  _.map(trim),
  split(' '),
  toLowerCase
)

換成 FP 就變得相當易讀。

Note. 感謝 Mike 與良葛格在為什麼要學 Functional Programming? 留言中幫我釐清，並不是要屏棄 OOP 直接投入 FP，而是清楚他們的優缺點後，再套用到合適的專案，甚至也可以擷取各自優點兩個一起用。

來對照一下吧

這個表格是參考這邊，用不同面向來比較兩種 paradigm，自己覺得蠻有幫助所以就附註在這裡。

BASIS	FP	OOP
Data	Uses immutable data.	Uses mutable data.
Model	Follow a declarative programming model.	Follow an imperative programming model.
Execution	The statements can be executed in any order.	The statements should be executed in particular order.
Iteration	Recursion is used for iterative data.	Loops are used for iterative data.
Element	The basic elements are Variables and Functions.	The basic elements are objects and methods.
Use	Often be used when there are few things with more operations.	Often be used when there are many things with few operations.

參考文章

如有錯誤或需要改進的地方，拜託跟我說。
我會以最快速度修改，感謝您

歡迎追蹤我的部落格，除了技術文也會分享一些在矽谷工作的甘苦。

為什麼要學 Functional Programming?

Do Everything with Function

系列文

Functional Programming in JS 共 30 篇

RSS系列文訂閱系列文

229 人訂閱

完整目錄

熱門推薦

{{ item.channelVendor }} | {{ item.webinarstarted }} |

直播中

2 則留言

listennn08

iT邦高手 5 級 ‧ 2020-09-03 08:54:56

例子的寫法不太對

const words = lower.split(' ') // ['welcome', 'to', 'fp', 'world ']
這裡會是產出 ['welcome', 'to', 'fp', 'world', '']

另外筆誤的地方

return keepers.join('-') // 'world welcome'

寫文章辛苦了

回應 1
檢舉

hannahpun iT邦新手 3 級 ‧ 2020-09-03 10:54:25 檢舉

真的是筆誤(汗)，已更新，謝謝

登入發表回應

良葛格

iT邦新手 2 級 ‧ 2020-09-04 08:01:08

Declarative is What to do 建議改為 Declarative is What's xxx ... 也就是宣告 xxx 是什麼。

類似地，「Declarative 則是可以直接知道做了 "什麼"」建議改為「Declarative 則是定義 xxx 是 "什麼"」

將 Array 加總的例子，建議可以是：

命令式

function sum(array) {
    // 做加總必須累加
    let total = 0
    for(let i = 0 ; i < array.length ; i ++ ){
        total += array[i]
    }
    return total;
}

console.log(sum([3, 2, 1]));

函數式

function sum(array) {
    // 空陣列，總和就是 0
    if(array.length === 0) {
        return 0;
    }
    
    let head = array[0];
    let tail = array.slice(1);
    // 總和就是陣列第一項的值與餘下陣列的總和
    return head + sum(tail);
}

console.log(sum([3, 2, 1]));

reduce 本身在 FP 中，算是比較高階的抽象了，以上例來說，若你將 sun 的 head + sum(tail) 部份，想辦法再抽離出來，就會朝著 reduce 的方向重構，因此 reduce 的運用通常會封裝為函式，突顯其意圖，例如：

function sum(array) {
    return array.reduce((accumulator, elem) => accumulator + elem);
}

console.log(sum([3, 2, 1]));

這段範例：

// Imperative is How to do
// 'Welcome to FP world'
const doStuff = str => {
      ...
}

doStuff('Welcome to FP world')

改一下註解部份：

// Imperative is How to do stuff
// 'Welcome to FP world'
const doStuff = str => {
  ...
}

doStuff('Welcome to FP world')

這段範例：

// Declarative is What to do
// 'Welcome to FP world'
const doStuff = _.compose(
  join(' '),
  _.filter(x => x.length > 3),
  reverse,
  _.map(trim),
  split(' '),
  toLowerCase
)

建議改一下註解與命名：

// Declarative is What's stuff
// 'Welcome to FP world'
const stuff = _.compose(
  join(' '),
  _.filter(x => x.length > 3),
  reverse,
  _.map(trim),
  split(' '),
  toLowerCase
)

雖然只是寫作上的一個技巧，不過應該可以更突顯你想表達的意思。

回應
檢舉

登入發表回應

我要留言

立即登入留言

參賽組數

902 組

團體組數

37 組

累計文章數

19752 篇

完賽人數

529 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 17th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# linux windows server css react

IT邦幫忙

Functional Programming in JS系列 第 3 篇