コピー目的でObject.assignは使っちゃダメ。オブジェクト型はシャローコピーされるので注意

React + Reduxを仕事で書くようになるまで俺は知らなかったぞ、、、

Object.assignはシャローコピーです。

シャローコピーはつまり参照渡しのことです。

string、number、booleanはディープコピーみたいなのですが、オブジェクトだけ参照渡しになるらしい。

スポンサーリンク

検証コード

var obj = {
  auther: 'taro',
  title: 'Object.assignは子オブジェクトはシャローコピーされるので注意',
  tags: {
    javascript: true,
    nodejs: true,
    ruby: false
  }
}

こんなオブジェクトがある。

最近firebaseを触ってるのでこんなオブジェクトになったりする。

これをObject.assignしてみる

 

var newObj  = Object.assign({}, obj)
obj.title = "タイトルを変える"
console.log(newObj.title) //Object.assignは子オブジェクトはシャローコピーされるので注意

コピー元のタイトルを変更してもコピーしたオブジェクトの値は変更されない。

 

次はオブジェクトを変更してみる

obj.tags.javascript = false
console.dir(newObj.tags)

これを実行するとこうなる

{ javascript: false,     nodejs: true,     ruby: false }

 

スポンサーリンク

まとめ

コピー目的でObject.assignを使うのはやめましょう。

完全にコピーしたい場合はlodashのcloneDeepを使うのが確実

 

関連記事

javascriptのオブジェクトは参照渡しだから注意