mutable vs. immutable

在開始說明前，先複習一道題目:

var a = {};  
var b = a;                      
var c = b = { number: 1 };      
c.name = 'yahaha';              
console.log(a);                 // output =?

Ans. console.log(a);會輸出 {}，也就是空物件。

但可以想一想b和c的輸出是什麼，想好再往下看!

console.log(b);                  // {number: 1, name: 'yahaha'}
console.log(c);                  // {number: 1, name: 'yahaha'}

為什麼明明.name的屬性是給c，卻會影響到b?

這是基於JS裡的物件，是透過 傳參考(call by reference ) 的方式，
藉由共用相同的記憶體位置，共享資料來源。

所以上面題目的關係是這樣子:

var a = {};                     // 指派一個空物件(一個記憶體位置)
var b = a;                      // b指向a
var c = b = { number: 1 };      // c指向b, b 指向一個新的物件(另一個記憶體位置)
c.name = 'yahaha';                
console.log(a);                 // {}

b和c指向同樣的記憶體位置，所以內部的屬性改變，就會互相影響。

物件是Mutable(可變的)

這是基於JS裡的物件，除了基本型態外，會透過 傳參考(call by reference ) 的方式共享資料來源。
因此，指向同個物件(同個記憶體位置)的變數會互相影響，所以是可變的。
這樣的好處是可以共享記憶體位置，節省記憶體的空間。

基本型態的資料都是immutable(不可變的)

相對於物件，因為基本型態的資料是直接傳值(call by value)，每次指派都會分配新的記憶體位置，在記憶體位置上儲存值。
賦值後如果有任何改變（例如：新增、修改、刪除），不會直接更動記憶體上的資料，而是回傳一個新值，所以是不可變的。

(因為之前沒寫過Data type，下面寫的比較詳細，想要複習可以往下看。)

JavaScript Data type

在JS裡，Data type資料型態 分為 Primitive 基本型態 和 Composite 複合型態。

Primitive 基本型態

1. number
2. string
3. boolean
4. null
5. undefined
6. symbol ( ES6新增 )

Composite 複合型態

• Object literal 物件實字 : 如 { } 為Object建構式的實例(instance)，可以建立物件。

> typeof {}
'object'

> let human = { name: 'Winnie the Pooh', age: 108 }
undefined

• 包裹物件 : 以 new 關鍵字 建立包裹物件

> typeof 10
'number'

> typeof Number
'function'

> typeof Number(10)
'number'

> typeof new Number(10)
'object'

> typeof 'caterpillar'
'string'

> typeof new String('caterpillar')
'object'

• Array literal 陣列實字 : 陣列也是物件

> typeof []
'object'
> [].length
0
> let arr = [1, 2, 3]
undefined

• Array-like 類陣列 : 如 字串(從ES5開始)即是類陣列，但字串的內容無法變動。

提問

• 解釋 mutable 與 immutable objects 之間的不同。
• 舉個 immutable 在 JavaScript 中例子？
• immutability 的憂劣？
• 如何達成 immutability？

【如內文有誤還請不吝指教>< 並感謝閱覽至此的各位:D 】

參考資料 :
-寫 React 的時候常常聽到 immutable，什麼是 immutable ?
-Immutability 為何重要？淺談 immutable.js 和 seamless-immutable
-[ngrx/store-8] Javascript Mutable 跟 Immutable 資料型態

---正文結束---