オブジェクトのコピーのやっかいなところ

公開2019/8/16

オブジェクトのコピー

JavaScriptではオブジェクトのコピーに気をつかいます。

変数をコピーする場合は書いた通りですが、オブジェクトではそう簡単ではないのです。

JavaScript

1let a = 0
2console.log(a) // 0
3let b = a
4b = 1
5console.log(a) // 0

bという変数にaを代入し、bを書き換えても、aの中身は変わりません。

これをオブジェクトでやってみます。

JavaScript

1let obj1 = { a: 0 }
2console.log(obj1.a) // 0
3let obj2  = obj1
4obj2.a = 1
5console.log(obj1.a) // 1

このように、オブジェクトのコピー先でプロパティの値を変更するとコピー元のオブジェクトのプロパティの値も変更されます。

これは、オブジェクトの場合はコピーではなく、オブジェクトへのリンクを共有しているだけだからです。

上記の例では{ a: 0 }というオブジェクトの位置をobj1が保持し、それをobj2にコピーしているので、obj1.aもobj2.aも同じオブジェクトを指します。

ちなみにオブジェクトはletだろうとconstだろうとプロパティの書き換えはできます笑

オブジェクトを変数と同じようにコピーするにはObject.assign()を使ってオブジェクトを新しく作成する必要があります。

Object.assign()はES6以降で使用できます。

JavaScript

1let obj1 = { a: 0 }
2console.log(obj1.a) // 0
3let obj2  = Object.assign({}, obj1)
4obj2.a = 1
5console.log(obj1.a) // 0

ただ、Object.assign()にも問題があって、コピー元のオブジェクトを展開してはくれないのです。

プロパティに配列やオブジェクトを含む多層のオブジェクトだと、2層目以下はまたメモリ位置のみのコピーになります。

JavaScript

1let obj1 = { a: [0] }
2console.log(obj1.a[0]) // 0
3let obj2  = Object.assign({}, obj1)
4obj2.a[0] = 1
5console.log(obj1.a[0]) // 1

こうなってしまいます。

これをシャローコピーというそうです。

調べてみるとJavaScriptにディープコピーしてくれる関数はまだ用意されていないようです。

JavaScript

1let obj1 = { a: [0] }
2console.log(obj1.a[0]) // 0
3let obj2 = JSON.parse(JSON.stringify(obj1))
4obj2.a[0] = 1
5console.log(obj1.a[0]) // 0

JSON.parseとJSON.stringifyは一度jsonに展開してまたオブジェクトに戻す関数です。ただ、プロパティの値にfunctionやundefinedがあるとそのプロパティそのものが消えてしまうので注意してください。

ちなみにオブジェクトはletだろうとconstだろうとプロパティの書き換えはできます笑

あとからコピー先でプロパティの書き換えをされても変更しないようにするにはObject.freeze()を使います。

JavaScript

1let obj1 = { a: 0 }
2Object.freeze(obj1)