【Javascript】同じ変数を参照したときの同期を回避する方法

結論

以下のようにJSON.parseとJSON.stringfyを使ってuser1との関係性を切ればok

const user1 = {
  name: "たろう",
  sex: "man",
};

let user2 = JSON.parse(JSON.stringify(user1));

user2.name = "はなこ";
user2.sex = "woman";

user1.name; // =>たろう
user2.name; // =>はなこ

解説

変数に代入するときに忘れがちなポイントがあります。
それは
「変数には参照先の情報が入っているだけで、その中身は入っていない」
ということです。
たろう君について見てみましょう。

const user1 = {
  name: "たろう",
  sex: "man",
};

user1にはオブジェクトではなく、「太郎君について書かれたオブジェクトへの参照」が入ります。

この事実を念頭に置いて次の行を見てみましょう。「太郎君について書かれたオブジェクト」をstringにして、そのあとJSON形式でオブジェクトに戻しています。

let user2 = JSON.parse(JSON.stringify(user1));

このとき、user2には「太郎君について書かれたオブジェクトのコピーへの参照」が入ります。

コピーです。
つまり、user1とuser2が参照しているものは「値が同じなだけで全く別物のオブジェクト」です。したがってuser2の値をいくら変えようがuser1には影響を及ぼしません。逆も然りです。

もしこの行を

let user2 = user1;

とした場合、user2には「太郎君について書かれたオブジェクトへの参照」が入ります。user1と全く同じものです。
つまり、user1とuser2は「1つのオブジェクト」を参照します。親友同士が同じ女性に恋をした感じで切ないですね。

この状況でuser2の値を変更するとどうなるでしょうか。

const user1 = {
  name: "たろう",
  sex: "man",
};

let user2 = user1;

user2.name = "はなこ";

user1.name; // =>はなこ
user2.name; // =>はなこ

はい、user1も変わります。

おわりに

user1とuser2を別々に扱いたい場合は最初に紹介したような方法で同期を回避しましょう。

参考記事

JavaScriptに参照渡し/値渡しなど存在しない
JavaScriptで変数にオブジェクトを代入したら参照先が同期されてしまう現象について