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

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

ただいまの
回答率

90.50%

  • JavaScript

    16903questions

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

  • Chrome

    618questions

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

  • Firefox

    212questions

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

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

解決済

回答 4

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 2,631
退会済みユーザー

退会済みユーザー

質門

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

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

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

var obj={
    "boolean":true
}
console.log(obj);

setTimeout(function(){
    obj.boolean=false;
},10000);

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

var obj={
    "boolean":true
}
var variable=obj;
console.log(variable);

setTimeout(function(){
    obj.boolean=false;
},10000);
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 4

checkベストアンサー

+8

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/01/09 08:13

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

    キャンセル

  • 2017/01/09 08:23 編集

    .

    キャンセル

+5

consoleオブジェクトを使うときにコンソールを開いていない場合の動作は2つのパターンがあります。

  1. consoleオブジェクトが実行されない。
  2. コンソールが開かれるまで出力内容をキャッシュ(最近はこちらが多いようです)。

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+2

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

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>

</style>
</head>
<body>

<script>
var obj={
    "boolean":true
}
console.log(obj);

setTimeout(function(){
    obj.boolean=false;
    console.log(obj);
},10000);
</script>
</body>
</html>
07:51:36.500 Object { boolean: true }
07:51:46.514 Object { boolean: false }


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

07:51:36.500 Object { boolean: false }
07:51:46.514 Object { boolean: false }


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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+1

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

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>

</style>
</head>
<body>

<script>
var obj={
    "boolean":true
}
console.log("obj:" + obj.boolean);
console.log(obj);

setTimeout(function(){
    obj.boolean=false;
    console.log("obj:" + obj.boolean);
    console.log(obj);
},10000);
</script>
</body>
</html>

イメージ説明

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 90.50%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 解決済

    JavaScript 変数の値の変化で実行される関数の作り方

    JavaScriptで、varで宣言された変数の値が falseからTrueに変わったら実行される関数の作り方を探しております。 変数を監視しているようなものと言ったら良いので

  • 解決済

    function内のfor文を一定間隔で回したい

    下記poseがtrueになった瞬間に1秒処理を一時停止させて、1秒後にposeをfalseに戻して処理を続行させるやり方をご存じの方がいましたら教えて下さい。 もう1つポイントと

  • 受付中

    関数を繰り返したい

    関数を繰り返したい。 var catchBorder = $('.catch-text--border'); var flg = false; fun

  • 解決済

    if文の実行順序について

    JavaScript の基本の「image changer を追加する」にあるコードについてなのですが var myImg = document.querySelector('

  • 解決済

    このコードを短くしたい

    a に 1 か 2 が入る関数です。 Aは何度も呼ばれ、戻り値も使います。 この処理をもっと短くかけませんでしょうか。 var is2 = false; var A = fun

  • 解決済

    3と3の倍数はアホと叫ぶようにしたい

    いつもお世話になっております。 javascript初心者です。 現在、3と3の倍数になったときに「AHO!」と叫ぶプログラミングを作成しております。 やりたいことは至ってシン

  • 受付中

    オブジェクトと変数、オブジェクトの比較

    var x = false; var y = new Boolean(false); var x = new Boolean(false);

  • 解決済

    javascriptの関数でブロックをしたい

    javascriptにおいて、ある関数を排他的に使われるようにして同時に実行 されないうようにしたいのですが、どのようにしたらよいでしょうか? 完全にブロックできれば理想ですが、1

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

  • JavaScript

    16903questions

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

  • Chrome

    618questions

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

  • Firefox

    212questions

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