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