JavaScript: ディープコピーには structuredClone() を使おう

JavaScript: ディープコピーには structuredClone() を使おう

June 1, 2023

オブジェクトをディープコピーしたい場合にこれまで使われてきた有名なテクニックは JSON.stringify()JSON.parse() を使ったものでした。

const original = { name: 'Alice', friends: ['Bob', 'Charlie'] };

// 👇
const deepCopied = JSON.parse(JSON.stringify(original));

original.friends.push('David');

console.log(original); // ['Bob', 'Charlie', 'David']
console.log(deepCopied); // ['Bob', 'Charlie']

…でしたが、いつからか標準で structuredClone() というメソッドが用意されていました。(知らなかった!)

ディープコピーしたい場合、今後はこちらを利用しましょう!

const original = { name: 'Alice', friends: ['Bob', 'Charlie'] };

// 👇
const deepCopied = structuredClone(original);

original.friends.push('David');

console.log(original); // ['Bob', 'Charlie', 'David']
console.log(deepCopied); // ['Bob', 'Charlie']

詳細は以下をご参照ください。

https://developer.mozilla.org/ja/docs/Web/API/structuredClone

私の経験では、実際にはシャローコピーで十分な場合が多くて、ディープコピーは言及されるほど使用場面が多くはない気もしますね。