什麼是 Side Effect?

吃藥時，藥包上都會註明可能會有什麼副作用，Side Effect 就是這個意思，也就是除了主要的作用外，可能會產生的額外作用

function 內服藥(症狀){
  console.log('肚子痛')
  return `治療${症狀}`;
}

內服藥('流鼻水'); 
// '肚子痛'
// '治療流鼻水'

主要的作用

function 本身做的功能，也就是治療流鼻水

額外作用 Side Effect

任何在運算的過程中改變了 function 內服藥 以外的變動就是 Side Effects，console.log('肚子痛') 會印在 function 外瀏覽器的 console tab 所以這就是 Side Effect

其實 Side Effect 不止是運用在 Function 裡，會變動到原本的變數值也算是 Side Effect

var x = 0;
x += 3

num++
y = "Hello " + x

Side Effect 會導致不易維護程式碼、得到無法預期結果等等。而平常撰寫 javaScript 容易造成的 Side Effect 非常之多，就先列常見的

• 修改外部的 state

  // 改了 global 變數
  var a = 0;
  a++;
  

• 發送 HTTP Request

• Rendering screen

• 使用會改變原陣列/物件的 JS method (eg. splice)

• 修改任何外部變數

• DOM 操作

• 讀取 input 的值

• Changing DB value

• logging & console: 改變了系統狀態

驚! 問題來了，以上根本就是我們平常在做的事啊！改一下 DOM 然後點擊按鈕發出 HTTP Request 再來印出結果改動頁面，這些

全部都有 SIDE EFFECT

javaScript 世界太容易有 Side Effects，但它又是造成 Bug 的主要來源之一，我們很難完全避掉但可以運用一些技巧，例如把 Side Effect 用 Monad 封裝起來、讓 Side Effect 只作用在一定的範圍內、避免使用本身就有 Side Effect 的原生方法，讓程式碼是可預期且穩定的。

如何避免 Side Effects

除了避免使用有 Side Effect 的 js 原生方法 (去年曾經分享過哪些 Array 原生方法會造成 Side Effect 哪些不會)

let xs = [1, 2, 3, 4, 5]

❌
xs.splice(0, 3) // xs -> [1, 2, 3]
xs.splice(0, 3) // xs -> [4, 5]
xs.slice(0, 3) // xs -> []

✅
xs.slice(0, 3) // xs -> [1, 2, 3]
xs.slice(0, 3) // xs -> [1, 2, 3]
xs.slice(0, 3) // xs -> [1, 2, 3]

我們要學的是只是作一下弊

• Dependency injection: 把問題丟給別人
• Using an Effect functor: 拖延戰術

Dependency injection

這個方法我們把所有 impure code (會造成 Side Effect 的) 都放到參數裡，然後就丟著不管了，把責任丟給別人

function logSomething(something) {
    const dt = (new Date()).toISOString();
    console.log(`${dt}: ${something}`);
    return something;
}

可以看到上面 impurities code 有

• new Date(): 你每次執行結果都有可能不同
• console.log

若把以上兩個抓起來丟進參數裡

function logSomething(d, cnsl, something) {
    const dt = d.toISOString();
    return cnsl.log(`${dt}: ${something}`);
}
const something = 'Hannah';
const d = new Date();;
logSomething(d, console, something)

這個 function 就變 Pure 了?!其實不然，因為你每次丟進去的 input 還是會導致不同的 output，哪門子解決方法。

寫成下面就才真的是 Pure，"one input, one output"。不去訪問 global 物件例如 console 或 Date，讓資料維持穩定。

const d = {toISOString: () => '1865-11-26T16:00:00.000Z'};
const cnsl = {
    log: (msg) => {
        return msg;
    },
};
function logSomething(d, cnsl, something) {
    const dt = d.toISOString();
    return cnsl.log(`${dt}: ${something}`);
}
logSomething(d, cnsl, "Off with their heads!");
//  1865-11-26T16:00:00.000Z: Off with their heads!

但你可能會說怎麼可能不用 Date，我就是要偵測今天日期啊，請看下一個解法

lazy functions

把 impure function 再包進另一個 function 就好了!
怎麼做呢？先來看一個例子

function logSomething() {
    console.log('Hello World');
    return 0;
}
logSomething(); 
// 'Hello World'
// 0

上面很清楚是 impure function，因為 log 會造成 Side Effect，那若換成

function logSomething() {
    function Something() {
	    console.log('Hello World');
        return 0;
	}
    return Something;
}

// ----- 或更常見改成 arrow function

function logSomething = () => () => {
	console.log('Hello World');
    return 0;
}

logSomething(); // Just return the same function
logSomething(); // Just return the same function
logSomething(); // Just return the same function

就完全變 Pure Function 了耶，因為符合

• One Input, One output 不管輸入幾次同樣值，回傳結果永遠相同
• 沒有 Side Effect
• 不依賴任何外部的狀態

自己認為是偷吃步，但完全可以運用在實務中
Note. 感謝 良葛格 補充說明這種將副作用的世界與無副作用世界連結在一起的邊界手法，只是最低限度為了滿足函式有輸入有輸出特性，而不得不為的方式。因為嚴格說，若你的函式傳回的函式是不純的，那麼該函式也會是不純的。

The effect functor

這個比第一個複雜很多，會在講到 Functor 時再說

小結

FP 要追求的…其實不是整個程式都是 Pure，而是 Pure 與 Impure 有明顯的界線，Side Effect 不全然是壞事也不是說有 Side Effect 的函式就不要使用，而是儘可能讓 Side Effect 能有好的管控，不要出現預期外的 side effect。

參考文章

• HOW TO DEAL WITH DIRTY SIDE EFFECTS IN YOUR PURE FUNCTIONAL JAVASCRIPT
• Side Effects(副作用)與Pure Functions(純粹函式)

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

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