結論

これからのオブジェクトのディープコピーにはstructuredClone関数を使おう。

const obj = { hoge: [new Date(2023, 3, 12), 1], fuga: 'foo' };

const objClone = structuredClone(obj); // ディープコピー

obj.hoge[1] = 10;
console.log(objClone.hoge[1]); // 1

objClone.hoge[0].setFullYear(2050);
console.log(obj.hoge[0].getFullYear()); // 2023

背景

JavaScriptのオブジェクトや配列の代入はシャローコピーです。

const arr = [0, 1, 2];
const arr2 = arr; // シャローコピー

arr[0] = 10;
console.log(arr2[0]); // 10

arr2はarrのシャローコピーであり実際には同じ配列を指しているので、arrに対する変更はarr2からも反映されて見えることになります。

上の例をディープコピー、つまりarrに対する変更でarr2が変化しないようにするにはconst arr2 = arr.slice();とでもすれば良いです。
それなら別に大変では無いですが、しかしそれは上の例が単純なプリミティブ値の配列だったからです。
オブジェクトや配列が多段にネストされた値全体をディープコピーするのは大変です。

const arr = [{ hoge: [0] }, { hoge: [1] }, { hoge: [2] }];
const arr2 = arr.map(x => ({ hoge: x.hoge.slice() })); // ディープコピー

arr[0].hoge[0] = 10;
console.log(arr2[0].hoge[0]); // 0

そして何より上記のやり方だと値の構造に合わせてディープコピーのコードを変更しなければなりません。

そこでプレーンオブジェクトと配列とプリミティブ値の組み合わせからなる値をディープコピーする汎用的な方法としてJSON化をする方法があります。

従来の方法

これまでオブジェクトや配列全体をディープコピーするには一旦JSON化する方法がよく使われていました。

const objClone = JSON.parse(JSON.stringify(obj));

しかしこの方法には以下のデメリットがありました。

数値、文字列、配列、プレーンなオブジェクト以外の値はクローンできない
- Date型やMap型等はクローンできない
処理時間的にも使用メモリ量的にも非効率
再帰的な構造があると使えない

`structuredClone`

structuredClone関数はディープコピーを行うために作られた専用関数です。これを使えば従来のJSON化を使った方法のデメリットが解消できます。

JSON化を使った方法と比べた利点は以下です。

より多くの型がクローン可能
- クローンできる型の一覧
処理時間的にも使用メモリ量的にも効率的
再起的な構造があっても動作する

structuredClone関数は主要なブラウザ全てで利用可能です。

使い方は結論のサンプルコードを参照。