javascriptのArray.shift()を行うと、GoogleChromeのconsoleにて配列が正しく表示されない

Question

Array.shift()の動きを目視確認しようと思い、
shift()前後の配列の値をGoogleChromeのデベロッパーツールのconsoleに出力しました。

すると、配列の中身が上手く表示されません。

#上手くいくコード: shift()なし

	var array1 = ['あああ', 'いいい'];
	console.log(array1);

	// array1.shift();
	// console.log(array1);

正常に表示された

#上手くいかないコード

	var array1 = ['あああ', 'いいい'];
	console.log(array1);

	array1.shift();
	console.log(array1);

一つ目のconsole.log(array1);の結果から "あああ"が消えてしまっている。

備考：
テストコードは値がシンプルなのでさほど困りませんが、これから多次元配列を扱いたいと思っています。その為、consoleに正しく表示されると 表示されないとデバックが出来なくて困ると思い質問させて頂きました。ご教授下さい。よろしくお願いします。

#追記：
「上手くいかないコード」のコードと実行結果の対応が非常に分かりづらくなってしまっていた為、横に並べてみました。

Comments

[Lhankor_Mhy]

「一つ目のconsole.log(array1);の結果から "あああ"が消えてしまっている」とのことですが、これは2つ目ではなく、1つ目で間違いないですか？

[ID_7UGzV8hCHGs5]

はい。１つ目で間違いないです。
shift()処理の前に書いてある console.log(array1);の結果から"あああ"が消えてしまっています。

Answer 1

参照

オブジェクトは参照情報なので、console.log() の出力結果てあっても参照出力されます。
(以前、スナップショットを出力されるようGoogle Chromeの仕様変更があった記憶がありますが、いつの間にか、元の仕様に戻ったようですね)

プリミティブ型

プリミティブ型は値出力出来るので、yambejp さんの回答にあるように、JSON.stringify() でString型に変換すれば、簡易的なスナップショットはとれます。
が、全てのObject型に対応しているわけではないので、元のオブジェクトを完全再現する事は出来ません。

ブレークポイント

もう一つの手段として、ブレークポイントを設定すれば、その時点のオブジェクトの状態を得ることが出来ます。
この方法が最も確実だと思います。

Re: ID_7UGzV8hCHGs5 さん

Answer 2

そういう仕様になっているようです。

【console.log - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Console/log#Parameters

Chrome や Firefox の比較的新しいバージョンを使っているなら注意が必要です。これらのブラウザで記録されるのはオブジェクトへのリファレンスです。そのため、console.log() を呼び出した時点でのオブジェクトの値が表示されるのではなく、内容を見るために展開させた時点での値が表示されます。

【【Chrome】参照型変数を console.log/dir した時の挙動が怪しい｜もっこりJavaScript｜ANALOGIC（アナロジック）】
http://analogic.jp/console-dir-log-caution/

１．黒魔術的解決策

'use strict';
 
var obj = {name: 'taro'};
 
console.log(JSON.parse(JSON.stringify(obj)));
console.log(JSON.parse(JSON.stringify(obj)));

Comments

[ID_7UGzV8hCHGs5]

なるほどですm(__)m
リファレンスなんですね。
黒魔術的解決策で無事解決出来ました。ありがとうございます！

Answer 3

配列の内容が実際に展開されるまで、中身の表示が遅延されています。
JavaScript - JavaScript Arrayオブジェクトが正しく表示されない｜teratail

解決方法は、console.logの際に複製してしまうのが手っ取り早いです。

    var array1 = ['あああ', 'いいい'];
    console.log([...array1]);

    array1.shift();
    console.log(array1);

Comments

[Lhankor_Mhy]

解決してましたか。

[oikashinoa]

軽く見たい時はspreadでばらすのはお手軽で良いですね。

[Lhankor_Mhy]

Object の場合には Object.assign({}, obj) ですね。
とはいえ、両方ともシャローコピーなので、ディープな展開には対応できないという問題はあります。

Answer 4

ごめんなさい、質問の意図がわかりません

shift()は配列を破壊的に先頭文字を抜き出す処理です
MDN -
Array.prototype.shift()

一つ目のconsole.log(array1);の結果から "あああ"が消えてしまっている。

は正しい処理ですが、逆にどういう結果を期待しているのでしょうか？

追記

デバッグでさかのぼって参照したいということですか
一度文字列化してオブジェクトに戻せば良いかもしれません

var array1 = ['あああ', 'いいい'];
console.log(JSON.parse(JSON.stringify(array1)));
array1.shift();
console.log(JSON.parse(JSON.stringify(array1)));

Comments

[oikashinoa]

一つ目のconsole.log()はshift()する前なのに、shift()後の結果が出ているのが質問の意図だとおもいます。
出先なんで試してないですが、私もおかしいのでは？と思いました。

[yambejp]

なるほど、あとから参照すると破壊されたあとのデータが参照されるということですね。
ありがちなのはJSONで処理するとかですかね

[ID_7UGzV8hCHGs5]

皆様回答ありがとうございます。
質問を整理して、新しく追記致しました。　よろしくお願い致します。

[ID_7UGzV8hCHGs5]

ありがとうございました。
「一度文字列化してオブジェクトに戻せば良いかもしれません」
⇒頂いた書き方で、目的通りの出力になることを確認しました。ありがとうございました！