JavaScriptでのオブジェクトのディープコピーとシャローコピー – JavaScriptで始めるプログラミング
JavaScriptにおいて、オブジェクトをコピーする方法には主にディープコピーとシャローコピーの二種類があります。これらの違いを理解することで、より効果的なコーディングを実現できます。
1. シャローコピー
まず、シャローコピーについて説明します。これは、オブジェクトのトップレベルのプロパティのみをコピーする方法です。
- プロパティがプリミティブ型の場合、その値がコピーされます。
- プロパティが参照型の場合、その参照がコピーされます。
つまり、オリジナルのオブジェクトとコピーされたオブジェクトは同じ参照を共有します。
const original = {a: 1, b: {c: 2}};
const shallowCopy = {...original};
shallowCopy.b.c = 3;
console.log(original.b.c); // 出力: 3
この例では、シャローコピーされたオブジェクトのcプロパティを変更すると、オリジナルのオブジェクトも影響を受けます。
2. ディープコピー
次に、ディープコピーについてです。これは、オリジナルのオブジェクトの全てのレベルのプロパティをコピーする方法で、参照型のプロパティも新しいコピーが作成されます。
const original = {a: 1, b: {c: 2}};
const deepCopy = JSON.parse(JSON.stringify(original));
deepCopy.b.c = 3;
console.log(original.b.c); // 出力: 2
この例には、JSONのパースとストリング化を利用しています。ディープコピーされたオブジェクトのcプロパティが変更されても、オリジナルのオブジェクトには影響しません。
3. どちらを使うべき?
それぞれのコピー方法には利点があり、用途によって使い分けることが重要です。
シャローコピー: パフォーマンスが求められる場合や、オブジェクトがネストしていない場合に有効です。
ディープコピー: 完全に独立したコピーを作成したい場合に適しています。ただし、パフォーマンスに注意が必要です。