わたしもみている | Immutable Javascript using ES6 and beyond(Object)

過去にこういう記事書いて
Immutable.jsを使って参照等価性を保証するのと、Object.assignやArray.reduceを使ってそれするのと何が違うんだろうと思って、
lmmutable.jsを使うユースケースはどんな時かを探っていました。
「 Immutable Javascript using ES6 and beyond」は「lmmutable.JS vs ECMAScript2015」したら出てきた記事です

[code language="javascript"]
const person = {
name: 'john',
age : 28
}
const newPerson = person;
newPerson.age = 30;
newPerson === person
//true
person
// {name: "john", age: 30}
[/code]

これは参照元のageを書き換えてしまいます。
厳密等価演算子でもtrue

freezeしても。。
[code language="javascript"]
const myObject = {a: {b: 1}, c: 2};
Object.freeze(myObject);
myObject.a.d = 2;
myObject
// {a: {b: 1, d: 2}, c: 2}
[/code]
子供オブジェクトはfreezeできない。

不変オブジェクトにするには、、

[code language="javascript"]
const person = {
name: 'John',
age: 28
}
const newPerson = Object.assign({}, person, {
age: 30
})
console.log(newPerson === person) // false
console.log(person) // { name: 'John', age: 28 }
console.log(newPerson) // { name: 'John', age: 30 }
[/code]

新しいオブジェクトを返します。比較はfalseで同じ参照をもちません。
ちなみにObject.assign()の第一引数にpersonを渡すと、参照元のpersonも上書きますよね。

ここからがへぇだったのですが、
babel-stage2、experimental ES7 draftsでは
下のようなobject spread が使えます

[code language="javascript"]
const person = {
name: 'John',
age: 28
}
const newPerson = {
...person,
age: 30
}
console.log(newPerson === person);
//false
console.log(newPerson)
//{"age": 30, "name": "John"}//overrideします
[/code]

コード

これはいい。。
これだとassignいりませんね。
...はそのオブジェクトをコピーしています。
ageはoverrideしています。
なので上のコードでもし

[code language="javascript"]
const newPerson = {
age: 30,
...person
}
[/code]

こうした場合、
ageは28です。

[code language="javascript"]
const obj1 = {a: 1};
const obj2 = {b: 2};

const obj3 = {...obj1,...obj2};
console.log(obj3)
//{"a": 1,"b": 2}
[/code]

記事ではオブジェクトを削除する方法もあります。
ただこの方法は不変性に欠ける、なぜコードを多く書いて、オブジェクトを配列にして、操作しないといけないのかを問うています。

お時間です。
あしたはArrayの方を追ってみようと思います。

Reference:
Immutable Javascript using ES6 and beyond

【関連記事】
【Immutable.jsの使い方】Immutable.js超入門~ReactでsetStateのプロパティ値に直接代入避ける~