わたしもみている | 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」したら出てきた記事です

const person = {
 name: 'john',
 age : 28
}
const newPerson = person;
newPerson.age = 30;
newPerson === person 
//true
person
// {name: "john", age: 30}

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

freezeしても。。

const myObject = {a: {b: 1}, c: 2};
Object.freeze(myObject);
myObject.a.d = 2; 
myObject
// {a: {b: 1, d: 2}, c: 2}

子供オブジェクトはfreezeできない。

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

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 }

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

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

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

コード

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

const newPerson = {
 age: 30,
 ...person
}

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

const obj1 = {a: 1};
const obj2 = {b: 2};

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

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

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

Reference:
Immutable Javascript using ES6 and beyond

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