JavaScriptでのオブジェクトのディープコピーとシャローコピー – JavaScriptで始めるプログラミング

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. どちらを使うべき?

それぞれのコピー方法には利点があり、用途によって使い分けることが重要です。

シャローコピー: パフォーマンスが求められる場合や、オブジェクトがネストしていない場合に有効です。

ディープコピー: 完全に独立したコピーを作成したい場合に適しています。ただし、パフォーマンスに注意が必要です。

関連リンク

コメントを残す