Objectのコピーについて(Javascript)

javascrptのオブジェクトは単純な代入だと参照が渡されてしまいプロパティに対する編集が共有されてしまう。

const hoge = { name: 'hoge'};
let hogehoge = hoge;

hogehoge.name = 'hogehoge';

console.log(hoge)//{name: 'hogehoge'}が表示される

1階層のオブジェクトであれば新規の配列を作成するmapを使い、参照を共有しないオブジェクトを取得できる。

const hoge = { name: 'hoge'};
let hogehoge = [hoge].map( val => ({...val}))[0];

hogehoge.name = 'hogehoge';

console.log(hoge, hogehoge)//{name: 'hoge'} {name: 'hogehoge'}が表示される

しかしオブジェクトがプロパティとしてオブジェクトを持っている場合、ネストされたオブジェクトの参照はやはり共有されてしまう。

const hoge = { id: 1 , data: { name: "hoge" } };
let hogehoge = [hoge].map( val => ({...val}))[0];

hogehoge.id = 999;
hogehoge.data.name = 'hogehoge';

console.log(hoge, hogehoge);
/*
{id: 1, data:{name: 'hogehoge'} } 
{id: 999, data:{name: 'hogehoge'} }が表示される。
idはそれぞれ独自の値を保持しているがdata.nameの値は共有されている
*/

プロパティとして配列を持っている場合も同じ挙動をとる。

const hoge = { id: 1 , arr: ['hoge'] };
let hogehoge = [hoge].map( val => ({...val}))[0];

hogehoge.id = 999;
hogehoge.arr[0] = 'hogehoge';

console.log(hoge, hogehoge)
/*
{id: 1, arr:['hogehoge'] } 
{id: 999, arr:['hogehoge'] }が表示される。
idはそれぞれ独自の値を保持しているがdata.arの値は共有されている
*/