console.logで更新前の値を確認したい

Question

前提

オブジェクトを更新しても、更新の前後の値をコンソールで確認したいです。

該当のソースコード

// 初期値
const obj = {id:1};

// 確認
// console.log( 'obj(初期値) = ', obj ); // この位置なら問題なく初期値が確認できる

// 更新
obj.id = 2;

// 確認
console.log( 'obj(初期値) = ', obj ); // この位置だと初期値でなく更新値になってしまう
console.log( 'obj(更新値) = ', obj2 );

実現したいこと

コンソールで、初期値と更新値を次のように確認したいです。

obj(初期値) =  {id: 1}
obj(更新値) =  {id: 2}

発生している問題

しかし、次のように更新値だけになってしまいます。

obj(初期値) =  {id: 2}
obj(更新値) =  {id: 2}

試したこと

まず// この位置なら問題なく初期値が確認できるの位置では問題なく初期値が確認できました。

そのためその直後の行で// 別名で再代入して、それをコンソールに出したのですが、// やはり更新値になってしまうという状況です。

// 初期値
const obj = {id:1};

// 確認
// console.log( 'obj(初期値) = ', obj ); // この位置なら問題なく初期値が確認できる
const obj1 = obj; // 別名で再代入

// 更新
obj.id = 2;

// 確認
console.log( 'obj(初期値) = ', obj1 ); // やはり更新値になってしまう
console.log( 'obj(更新値) = ', obj2 );

どのようにすれば、コンソールで、初期値と更新値を確認できるでしょうか？
ご回答宜しくお願い致します。

Comments

[kei344]

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

[nikuatsu]

ありがとうございます。気が付きませんでした。

Answer 1

ログ・デバッグ目的なら、JSON化した文字列をとっておくのも手ですね。

const obj1 = JSON.stringify(obj);

Comments

[nikuatsu]

これはなるほどな一手です。

オブジェクトで見たければ
const obj1 = JSON.parse( JSON.stringify(obj) );
にすれば一行で済むし、分かり易いですね。

ありがとうございます。

Answer 2

JavaScriptでのオブジェクトの代入は値ではなく参照のコピーになります。
つまり obj1はobjと同じオブジェクトを参照していることになります。
objのデータをobj1に複製したければ、objのプロパティを取り出してobj1のプロパティとしてセットする必要があります。Object.assignでそれができます。

// objのプロパティをobj1にコピー
let obj1 = {};
Object.assign(obj1, obj);

Comments

[nikuatsu]

オブジェクトの参照という意味だったのですね。基本的なところを抑えておりませんでした。原因を教えていただきありがとうございます。

Object.assignという解決策もばっちりでした。