day20: immuable

今天提到 immuable，对於程序当中储存的资料来说，
如果你存的资料可以被更改，那你永远不知道谁改了你的原始资料，
为了避免这种情况发生，我们就必须要有 immuable，
相信写 React 的大家常常会使用到这种方式来避免原始资料被破坏。

譬如我今天有个储存 array 的资料

const array = [1,2,4,6];

array[0] = 2;

console.log(array); // [2,2,4,6]

有发现上面的 array 变数被改变了吗？
从原本 [1,2,4,6] 变成 [2,2,4,6]

那如果有个 object 呢？

const objA = {x:1,y:2,}

objA[x] = 3;

console.log(objA); // {x:3,y:2}

有发现吗？上面的 array 和 obj 都轻易的被更改，
如果是共用变数，那使用的人，改到最後就会不知道哪些地方改到，
进一步让原始资料变的不乾净，解决得方式就是 immutable。

那 immutable 在 javaScript ES6 就提供了好用的方式。
分别是 Spread operator 展开运算子和 Rest operator 其余运算子。

譬如以上的范例，就可以改成以下这样

const array = [1,2,4,6];
const [_,...rest] = array;

const arrayCopy = [3,...rest];

console.log(array); // [2,2,4,6]
console.log(arrayCopy); // [3,2,4,6]

const objA = {x:1,y:2};
const objACopy = {...objA,x:3};

console.log(objA); // {x:1,y:2};
console.log(objACopy); // {x:3,y:2}

发现了吗？这样子改动的 copy 都不会改动到原本的 array 和 object,
就是原本的值不是 call by reference 而只是将原本的值 coby 一份，
给新的变数。所以就不会改动到原本变数里的值。

https://dev.to/mpodlasin/functional-programming-in-js-part-ii-immutability-vanilla-js-immutable-js-and-immer-2ccm