シャローコピー(Shallow Copy)とディープコピー(Deep Copy)

シャローコピー(Shallow Copy)

シャローコピー(Shallow Copy)は、オブジェクトの最上位レベルのプロパティのみをコピーし、ネストされたオブジェクトは参照として扱う。

const original = { number: 1, nested: { value: 2 } };
const shallowCopy = { ...original }; //スプレッド構文を使ってコピー
// オリジナルの値を変更
original.number = 3;
original.nested.value = 4;
console.log(shallowCopy); // { number: 1, nested: { value: 4 } }

Object.assignを使って、シャローコピー(Shallow Copy)する

const shallowCopy = Object.assign({}, original);

一般的にはスプレッド構文{ ...original }が推奨される。

ディープコピー(Deep Copy)

ディープコピー(Deep Copy)は、オブジェクトのすべてのレベルを新しいオブジェクトに完全にコピーする。

const original = { number: 1, nested: { value: 2 } };
const deepCopy = JSON.parse(JSON.stringify(original)); //JSONメソッドを使用
// オリジナルの値を変更
original.number = 3;
original.nested.value = 4;
console.log(deepCopy); // { number: 1, nested: { value: 2 } }

lodashを使って、ディープコピー(Deep Copy)する

import { cloneDeep } from 'lodash';
const deepCopy = cloneDeep(original);