JavaScript は説明の必要はありません。JavaScript は多用途性を備えた堅牢な言語ですが、JavaScript を使ったことがある人なら、おそらくいくつかの異常な動作に気付いたでしょう。その 1 つは、特にオブジェクトを操作する場合に、JavaScript が変数のコピーを処理する方法です。この記事では、ディープ コピーの概念と、それがプログラム内でデータを複製する際の予期せぬ問題を回避するのにどのように役立つかについて説明します。

変数のコピーを作成すると、JavaScript は新しいメモリ空間を作成し、そこにコピーされた値を格納します。新しい変数はこの新しいメモリ空間を指します。例えば：

x = 5;
y = x;

y は、 x と同じ値、つまり視覚的には 5 を持つ新しいメモリ空間を指します。次のようになります:

上記の概念はプリミティブ値にのみ適用され、オブジェクトの場合は異なります。次の 2 つのオブジェクトがあると想像してください:

let a = {
    name: 'Rick',
    lastName: 'Sanchez',
};

let b = a;

上の例では、予想されるように、b には独自のメモリ空間がありません。代わりに、a は、a が保存されているメモリ空間を指します。

この動作によりどのような問題が発生する可能性がありますか?基本的に、a または b のいずれかのフィールドを変更すると、両方の変数が変更されます。次のコードを実行して自分で確認してください。

let a = {
    name: 'Rick',
    lastName: 'Sanchez',
};

let b = a;

b.name = 'Morty';

console.log('a: ', a); // a:  { name: 'Morty', lastName: 'Sanchez' }
console.log('b: ', b); // b:  { name: 'Morty', lastName: 'Sanchez' }

これの解決策は？ a の値を b が指す新しい独立したメモリ空間に保存するには、ディープ コピーを実行する必要があります。

const b = JSON.parse(JSON.stringify(a));

このように、形式をオブジェクトから JSON に変更することで、JavaScript に強制的に新しいメモリ空間を作成させます。これは stringify メソッドを使用して行われ、独自のメモリ空間を持つ JSON は parse メソッドでオブジェクトに変換され、両方の変数は完全に独立したままになります。

このような奇妙な行動があなたに起こったことがありますか?コメント欄でお知らせください。喜んで読みます!