iT邦幫忙

2022 iThome 鐵人賽

DAY 9
1
Modern Web

致 JavaScript 開發者的 Functional Programming 新手指南系列 第 9

Day 9 :何謂 Immutable Data?(1):關於 Immutable 與 Mutable(修正版)

  • 分享至 

  • xImage
  •  

在一開始的簡介中我們曾經聊過構成 FP 的幾個要素,其中一點是,在 FP 這個設計典範中我們只使用 Immutable Data 來進行資料的處理。

為什麼「只能」使用 Immutable Data 呢?且什麼又是 Immutable Data 呢?我們首先來看看 MDN 文件對於 Mutable 的定義:

「Mutable is a type of variable that can be changed. In JavaScript, only objects and arrays are mutable, not primitive values.」

Mutable 是指可以被改變的變數,在 JavaScript 中只有物件及陣列屬於 Mutable Data ,基本型別不適用。

咦?是不是聽起來很抽象?在接下來的章節中,會有其他同樣很抽象的概念出現,希望接下來可以透過具體的範例來讓大家更加了解所謂的 Mutable 的概念。

舉例來說:

const a = {
	b: 0,
};
const c = [1, 2, 3];
a.b = 3;
c[0] = 0;

我們可以透過上述方式,更改到物件或是陣列元素同一個參考物件中的值,也就是更改到同一記憶體中的值,這樣的行為就是 Mutation!

由於 JavaScript 的基本型別並不會與其他基本型別共用同個記憶體位置,所以也就不會有所謂的 Mutable 的問題。

這也是為什麼在 MDN 文件中有說到:在 JavaScript 中物件才有所謂的 Mutable 的現象發生。

如果大家還記得的話,在先前的章節中我們曾花了大量的時間來討論在 JavaScript 中物件運作的方式及其「傳參考、傳分享」概念,若是我們將 Mutation 與傳參考的概念串在一起,一切都變得好理解的多。

我們同時也可以說,當我們去更改物件中的屬性值,就會產生「Mutation」的現象!

在一開始對 JavaScript 不是很熟時,可能會把 Immutable 的概念與宣告變數的 const 給搞混,覺得只要我不透過 let 或是 var 關鍵字來進行變數的宣告,應該就不會改變資料的結構吧?

但透過上方的範例,我們可以知道即便透過 const 宣告非基本型別,我們依然可以用其他手段改動到資料結構。

那麼如果我們透過 JavaScript 中的 freeze 物件方法來凍結物件,來避免物件資料結構的改動呢?

const obj = {
a: 'text',
b: {c: 1},
};
Object.freeze(obj);
obj.a = 'change';
obj.b.c = 'change';
console.log(obj);
// => ?

也許結果跟我們所想的有點不一樣:

/* => 
{
a: 'text',
b: {c: 'change},
};
*/

我們發現 freeze 只能針對第一層的基本型別進行凍結,第一層中的物件及其物件中的基本型別仍然可以被改動。

使用 Immutable Data 作為參考資料

基於先前有關 Mutable 的定義,所謂的 Immutable Data 就是指:「不使用共用參考物件的物件及陣列」資料來源這樣的概念

至於為什麼要不使用 Mutable Data, 而使用 Immutable Data 作為參考資料,最主要的原因就是**「避免資料的覆蓋」與「預期外的狀況」發生**。

這也是為什麼了解 JavaScript 的核心概念對於 FP 的學習有幫助,也可以說,如果不了解 JavaScript 本身的特性,可能會不曉得 FP 是要解決什麼問題。

看到這邊可能會發現一些盲點:為什麼我們要在 JavaScript 中導入一個不適合使用 Mutable data 的設計模式?

不可否認地,只要我們使用 JavaScript 這門語言進行開發,很難避免掉 Mutation 的行為發生,畢竟我們會大量使用物件這個資料結構,甚至有時候我們還要透過 Mutation 的特性讓元件之間彼此共用狀態。

但好在 JavaScript 中的 Mutation 會發生的情況就只有改動物件資料結構的這個行為而已,只要我們有意識的避開這種操作資料的方式,就可以避免元件狀態的互相污染,這可說是 FP 設計理念非常重要的一環。

在一些 FP 導向語言,例如 Haskell 語言,不會出現類似於 JavaScript 中物件資料結構更改的狀況(Mutation),特別獨立這個章節來分享 Immutable 的概念,並不是 FP 特別強調這一環,而是其與生俱來的特性,為了能在 JavaScript 模擬類似的行為,我們才會有要避免使用 Mutable Data 的狀況發生。

但單純了解 Mutaion 與 Immutable Data 的概念還不足以讓我們撰寫出完整的 FP 函式,還有許多知識點我們要補足,在那之前,我們先來練習如何用 Immtable 的方式來操作物件及陣列吧!

我們下一個章節見!

參考資料:

  1. MDN - Mutable

上一篇
Day 8 :JavaScript 型別與他們的地雷(5):結語
下一篇
Day 10 :何謂 Immutable Data?(2):更新物件
系列文
致 JavaScript 開發者的 Functional Programming 新手指南30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言