2024年1月4日(木)2024年1月3日(水) 投稿者: iwbjp

JavaScriptのディープコピーはstructuredClone()で可能

ディープコピーとは

ディープコピー（Deep Copy）は、オブジェクトや配列などの複合データ型をコピーするプロセスで、元のデータとは完全に独立した新しいデータを作成することを指します。

ディープコピーを行うと、元のデータとコピーされたデータが互いに影響を受けないようになります。

例えばJavaScriptで以下のように配列を代入してコピーを作成すると、コピー元の配列に値を入れた場合、コピーした配列の値も変更されてしまいます。

const foods = ['apple', 'banana', 'cookie']
const copy_foods = foods

foods[2] = 'donut'
console.log(foods) // ['apple', 'banana', 'donut']
console.log(copy_foods) // ['apple', 'banana', 'donut']

structuredClone()でディープコピー

前述のコードのように元のデータとコピーされたデータが互いに影響を受けないようにするためにはstructuredClone()でディープコピーを行います。

const foods = ['apple', 'banana', 'cookie']
const clone_foods = structuredClone(foods)

foods[2] = 'donut'
console.log(foods) // ['apple', 'banana', 'donut']
console.log(clone_foods) // ['apple', 'banana', 'cookie']

structuredClone()の登場以前はJSON.parse(JSON.stringify(foods))や再帰処理などでディープコピーされることが多かったです。

const foods = ['apple', 'banana', 'cookie']
const clone_foods = JSON.parse(JSON.stringify(foods))

foods[2] = 'donut'
console.log(foods) // ['apple', 'banana', 'donut']
console.log(clone_foods) // ['apple', 'banana', 'cookie']