js ソートの実行順序について

Question

sort関数の実行順序について疑問があります。
下記のようなコードがあった場合、ブラウザはどのような解釈をしているのでしょうか？

    (function(){
      'use strict';
      var array = {
        1:['c','a','d','b'],
        2:['aa','cc','bb'],
      }
      console.log(array[1]);//["c", "a", "d", "b"]①
      console.log(array);//1:["a", "b", "c", "d"]②
      array[1].sort();
      console.log(array[1]);//["a", "b", "c", "d"]③
      console.log(array);//1:["a", "b", "c", "d"]④
    })();

①の箇所と③の箇所は自然な順序に思えますが
なぜ②の時点でarray[1]が既にソートされているのでしょうか？

以下の環境で検証しました
Crome 63.0.3239.132
Safari 11.0 (12604.1.38.1.7

Answer 1

なぜ②の時点でarray[1]が既にソートされているのでしょうか？

ブラウザが②を実行しているとき、array[1]はまだソートされていませんが、あなたが②の結果を確認しているのは、おそらくソートされた後です。きっと、①の結果も②と同じ状況になっているでしょう。

console.logは、ブラウザのコンソールにarray[1]を表示します。
表示されたarray[1]は「出力された当時のarray[1]」ではなく、「いまのarray[1]」です。
「出力された当時のarray[1]」を出力するには、↓のコードのようにJSONの文字列にしてしまうか、array[1].slice()のようにしてコピーをつくりましょう。

console.log(JSON.stringify(array[1]));
console.log(JSON.stringify(array));
array[1].sort();
console.log(JSON.stringify(array[1]));
console.log(JSON.stringify(array));

また、コンソールで１行づつ実行して確認しても、期待しているような結果が得られるはずです。

---

以下のコードで同じような状況を再現できます。

var object = {a: 123, b: 123, c: 123};
console.log(object);
object.a = 456;
object.b = 456;
object.c = 456;
console.log(object);

ブラウザのコンソールに２回同じオブジェクトを出力します。それぞれ、クリックして中を確認してください。中身は同じになっています。

Comments

[defghi1977]

それだ！コンソールに表示されているのはobjectのライブビューというわけだ

[wp-h]

再現コードと確認手順まで詳細に載せていただいて助かりました！
正直文字だけでは..?状態だったので(^^;)
大変勉強になりました！ベントアンサーにさせていただきます

Answer 2

破壊的と非破壊的

Array.prototype.sort は破壊的です。
実行されれば元となった配列を直接書き換えます。

①の箇所と③の箇所は自然な順序に思えますが
なぜ②の時点でarray[1]が既にソートされているのでしょうか？

①の箇所が自然と思われるのでしたら、それは「破壊的な動作を望んでいる」ということになります。
逆に非破壊的なら、①②③④の全てでソート前の配列が出力されることになります。

何か根本的な部分で思い違いをしているように思われますので、一度、自分自身の考えを全て書きだして、矛盾がないか見直してみることをお勧めします。
ご自身で納得出来ないようでしたら、書き出した自身の考えをteratailへ寄せれば、どなたか気が付いた方が指摘してくれると思います。

Re: mercy5 さん

Comments

[wp-h]

>>何か根本的な部分で思い違いをしているように思われますので、一度、自分自身の考えを全て書きだして、矛盾がないか見直してみることをお勧めします。

おっしゃる通りでした。
認識不足に気がつくことができました^^;ありがとうございます。

Answer 3

以下は回答者の憶測が含まれています. 有力な根拠については不明です.
↓
根拠を追加

---

以下は間違った解釈です.
console.logメソッドに直接オブジェクトを指定した場合の動作に原因があるように見受けられます.

console.logメソッドの動作を

1. console.logメソッドが実行されると, WEBブラウザはログキューにその内容を保管する.
2. スクリプトの実行が完了(もしくはタイマーによる出力？)するとログの内容をコンソールに出力する.

であると仮定すると, 1でconsole.logの引数としてオブジェクトへの参照を渡した際に, 2の過程で初めてオブジェクトが直列化されることになります. 従って, sortメソッド実行前にも関わらず, array[1]の内容がソート済みとなっているように見えるのです.

---

https://developer.mozilla.org/en-US/docs/Web/API/Console/log
によれば

A list of JavaScript objects to output. The string representations of each of these objects are appended together in the order listed and output. Please be warned that if you log objects in the latest versions of Chrome and Firefox what you get logged on the console is a reference to the object, which is not necessarily the 'value' of the object at the moment in time you call console.log(), but it is the value of the object at the moment you click it open.

要約
console.logで記録されるものはその時点でのオブジェクトに対する参照値であり, その時点でのオブジェクトの内部値ではない. なので, コンソールからログ内のオブジェクトにアクセスすると, その時点での値が表示される.

この問題はJSON.stringifyメソッドを適用する, もしくはtoStringメソッドを実装しておく(Arrayオブジェクトについて正しく動作している要因)等, ログの内容を文字列として固定することで回避できます.

    (function(){
      'use strict';
      var array = {
        1:['c','a','d','b'],
        2:['aa','cc','bb'],
      }
      console.log(array[1]);//["c", "a", "d", "b"]①
      console.log(JSON.stringify(array));//②
      array[1].sort();
      console.log(array[1]);//["a", "b", "c", "d"]③
      console.log(JSON.stringify(array));//④
    })();

//コンソールでの出力結果
Array [ "c", "a", "d", "b" ]
{"1":["c","a","d","b"],"2":["aa","cc","bb"]}
Array [ "a", "b", "c", "d" ]
{"1":["a","b","c","d"],"2":["aa","cc","bb"]}

Comments

[wp-h]

検証にはconsole.logにそのままオブジェクトを渡しておおざっぱに確認することが多かったですが、今回の件で色々と考えさせられました。
console.logの出力にこんな仕組みがあったとは。勉強になります。

[defghi1977]

いや, この動作知らんと結構危険. 今回みたいにログを追ってデバッグする際に悩む原因になりうる. 気が付かせてもらってこちらとしても感謝です.

[KNaito]

これ、気付かずにはまりそうですね。手持ちの環境でテストしたところ、Firefox, Chrome, Safariでは今回のようにconsole.log後に修正された値が表示されました。node.js (9.5)やIEでは修正される前の値が表示されました。(Edgeは、オブジェクトとしか表示されず、オブジェクトの内部状態は表示されませんでした）
丁寧にチェックするときはstringifyをかけた方がよさそうですね。