わたしもみている | 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のプロパティ値に直接代入避ける~