質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.53%
Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

Firefox

Mozilla Foundationによって作られた無料、オープンソース、クロスプラットフォームなウェブブラウザ

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

4回答

13166閲覧

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

退会済みユーザー

退会済みユーザー

総合スコア0

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

Firefox

Mozilla Foundationによって作られた無料、オープンソース、クロスプラットフォームなウェブブラウザ

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

6グッド

2クリップ

投稿2017/01/08 22:10

編集2017/01/08 22:32

##質門
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);
AmaiSaeta, ya_penguin, eien_beginner, search_search👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

guest

回答4

11

ベストアンサー

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

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

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

投稿2017/01/08 22:52

raccy

総合スコア21733

miyabi_pudding, ya_penguin, i50, 5o5o_wagon, isirin, kei344, s8_chu, eien_beginner, yohhoy, maisumakun👍を押しています

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2017/01/08 23:13

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

退会済みユーザー

2018/07/19 01:16 編集

.
guest

5

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

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

投稿2017/01/08 23:13

s8_chu

総合スコア14731

daisy, dddd_gond, Yasumi.Mizuki, Tendo., auropun👍を押しています

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

2

仕様なのかバグなのかは分かりませんが、以下のように、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

daisy👍を押しています

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

1

コードをすこし変更して、動作を確認してみました。(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>

イメージ説明

console.log で オブジェクトを表示させた場合、その中味を展開して閲覧すると現時点の値が表示されるようです。

投稿2017/01/08 23:00

katoy

総合スコア22322

kei344👍を押しています

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.53%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

同じタグがついた質問を見る

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

Firefox

Mozilla Foundationによって作られた無料、オープンソース、クロスプラットフォームなウェブブラウザ

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。