console.log()はオブジェクト参照という話
はじめに
人によってはすごく当たり前のことかもしれませんが、タイトルの通りconsole.log()はオブジェクト参照です。なので参照元の値が変化すれば出力される値も変化します。
Chrome や Firefox の比較的新しいバージョンを使っているなら注意が必要です。これらのブラウザーで記録されるのはオブジェクトへの参照です。そのため、 console.log() を呼び出した時点でのオブジェクトの「値」が表示されるのではなく、内容を見るために開いた時点での値が表示されます。
引用: https://developer.mozilla.org/ja/docs/Web/API/console/log#引数
試してみる
実際にオブジェクト参照になる挙動や対処法を試してみます。
オブジェクト参照の出力
オブジェクト参照か試してみます。
1回目出力と2回目出力の間にfirstNameをyamamotoに変更する処理を挟みましたが、どちらもfirstNameはyamamotoになっていますね。
でもログ出力したい場合はオブジェクト参照ではなくプリミティブな値としてログを出したい場合の方が多いはずです。
今回の例だとconsole.logで出力した時点での値を出力するようにします。
JSON.parse(JSON.stringify())を使用する
オブジェクト参照ではなくプリミティブな値として出力したい場合は JSON.perse() と JSON.stringify() を使うようにMDNに記載されています。
console.log(obj) を使わず、 console.log(JSON.parse(JSON.stringify(obj))) を使用してください。
引用: https://developer.mozilla.org/ja/docs/Web/API/console/log#オブジェクトのログ出力
console.table()を使用する
そもそもconsole.log()がオブジェクト参照なので、console.log()以外のconsole関数でログを出せば良いです。
ネストが深くなければconsole.table()で出力すれば良いきがします。
若干見にくさはありますが。。。
おわりに
console.log()はオブジェクト参照であることを知ってなければ変なところで詰まりそうですね。
そもそもconsoleのメソッド使いこなせてないのでconsoleのMDNちゃんと見よ。。。
参考文献
Discussion