console.log()で出力した値が、変わるのはなぜ？

##質門
console.log()で出力した値が、変わるのはなぜですか？
仕様なのかバグなのかわかりません。
値が変わらない方法はわかりますか？

追記：chromeとfirefox、どちらもこの現象は起きたので、仕様なんですかね。。
追記：console.dirでもこの現象がおきました

上記の現象をみる手順
1:まずデベロッパーツールを開きます
2:ここでは予想通り"boolean"の値はtrueです。
3:デベロッパーツールを閉じます
4:10秒待ちます
5:そしてデベロッパーツールを開くと値がfalseになります

javascript
1var obj={
2    "boolean":true
3}
4console.log(obj);
5
6setTimeout(function(){
7    obj.boolean=false;
8},10000);

追記：変数にあらかじめ代入したらいけるかなと思いましたが無理でした。

javascript
1var obj={
2    "boolean":true
3}
4var variable=obj;
5console.log(variable);
6
7setTimeout(function(){
8    obj.boolean=false;
9},10000);

行動規範の内容に同意します

回答4件

ベストアンサー

前にArrayについて調べたのですが、仕様のようです。

デベロッパーツールのコンソールでObjectやArrayなどのオブジェクトを表示する場合、その中身は「console.log()が評価された時」の中身では無く、「コンソール上で表示をさせた時」の中身になります。これはHTMLのノードなども同様です。プリミティブ値以外は常に変化する可能性があると思った方が良さそうです。

確実にconsole.log()が実行されたときの状態を示すには、JSON.stringify()でJSONの文字列として出すのが確実かと思われます。Object.assign()でコピーを作るというのもありますが、浅いコピーしかされないたいめ注意が必要です。また、immutable.js等を使用して、そもそもObject等が変化することが無い設計にするという手段もあります。

投稿2017/01/08 22:52

raccy

総合スコア21784

退会済みユーザー

2017/01/08 23:13

これ、不思議な挙動ですね。なんか意味があるんでしょうが、目的がさっぱり分かりません。

退会済みユーザー

2018/07/19 01:16 編集

行動規範の内容に同意します

consoleオブジェクトを使うときにコンソールを開いていない場合の動作は2つのパターンがあります。
0. consoleオブジェクトが実行されない。
0. コンソールが開かれるまで出力内容をキャッシュ(最近はこちらが多いようです)。

質問者さんのような現象は、キャッシュしていた出力内容(obj)がsetTimeoutで上書きされたために発生したと考えられます。

投稿2017/01/08 23:13

s8_chu

総合スコア14731

仕様なのかバグなのかは分かりませんが、以下のように、setTimeoutにもログを出力させてみたら、以下のようになりました。

JavaScript
1<!DOCTYPE HTML>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<style>
6
7</style>
8</head>
9<body>
10
11<script>
12var obj={
13    "boolean":true
14}
15console.log(obj);
16
17setTimeout(function(){
18    obj.boolean=false;
19    console.log(obj);
20},10000);
21</script>
22</body>
23</html>

Log1
107:51:36.500 Object { boolean: true }
207:51:46.514 Object { boolean: false }

開発ツールを再描画させると、、、

log2
107:51:36.500 Object { boolean: false }
207:51:46.514 Object { boolean: false }

コンソールでは、objの履歴を表示してほしいですが、現状のobjの値が出ているので、
個人的には、バグだと思っています。。

投稿2017/01/08 23:01

hiroshi.kato

総合スコア93

コードをすこし変更して、動作を確認してみました。(chrome)
x.html

html
1<!DOCTYPE HTML>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<style>
6
7</style>
8</head>
9<body>
10
11<script>
12var obj={
13    "boolean":true
14}
15console.log("obj:" + obj.boolean);
16console.log(obj);
17
18setTimeout(function(){
19    obj.boolean=false;
20    console.log("obj:" + obj.boolean);
21    console.log(obj);
22},10000);
23</script>
24</body>
25</html>