javascriptのオブジェクトコピー

reactでアプリ作ってて，javascriptでオブジェクトをコピーしようと思ったらハマったので記事にしました．

javascriptは基本参照渡し

javascriptではオブジェクトを代入する時に参照渡ししてしまうのでコピーのつもりで代入すると元の変数も書き換えられてビビります．

オブジェクトのコピーってどうするの？

上記の問題を解決するためにObject.assign()という関数を使います．
以下のように記述することでオブジェクトのコピーが出来ます．

let obj1 = {value: 'hoge'}
let obj2 = Object.assign({}, obj1);

注意点

しかし，上記の関数には落とし穴があります．オブジェクトの中にネストされてオブジェクトが入っている場合は中のオブジェクトは参照渡しになります．

僕の場合は，オブジェクトの中にオブジェクトのリストが入っていました．ネストされたリストの中のオブジェクトを書き換えると，元の変数のオブジェクトも書き換えられてしまうのでおかしいな？って思ってたらやっぱり参照渡しされてました．オブジェクトの構造は以下のようになってます．

// オブジェクトの構造
let targetObject = {
  // オブジェクトの中にオブジェクトのリストが入っている
  person_list = [
    {"name": "tokumaru", "age": 20},
    {"name": "tokutoku", "age": 22}
  ]
}

解決方法

僕は，オブジェクトの中のリストをループで回してリスト内のオブジェクトを毎回コピーする感じにしました．
具体的には以下のようなコードになります．

let newObject = {
  person_list = []
}

targetObject.person_list.forEach(function(person, idx) {
  newObject.person_list.push(Object.assign({}, person))
})

まとめ

以上です．javascriptむずいヨ．
もっといい方法があるよって人はコメントよろしくお願いします．