forが２回されてる？

Question

let aaa = [];
let bbb = [];
console.log(aaa); 
console.log(bbb); 
console.log(bbb[2]); 
for(let i= 0;i<5;i++){
    bbb[i]=10;
}
console.log(aaa); 
console.log(bbb);

リンク内容

上記のようなもの作ってChromeデベロッパー・ツールでみたところ

図のような結果になります。
疑問点としては、forの前に代入されたような表示をしてること。
それなのに何も入ってないこと。
なぜこのような表示になってるのか。
これらの疑問がわかる方解説お願いします。

Answer 1

恐らくですが、質問者さんは「ページの読み込みが完了したらデベロッパーツールを開く」という手順でコンソールを確認したのではないかと思います。そのような手順でデベロッパーツールを開いた場合に質問文にあるような挙動になる理由は、console.logで配列を表示する場合、配列の内容はconsole.logが行われたタイミングではなく、デベロッパーツールを開いたときのものになるからです。以下のようにすることでconsole.logが実行されたタイミングの内容を得ることができると思います。

let aaa = [];
let bbb = [];
console.log(JSON.stringify(aaa)); 
console.log(JSON.stringify(bbb)); 
console.log(JSON.stringify(bbb[2])); 
for(let i= 0;i<5;i++){
    bbb[i]=10;
}
console.log(JSON.stringify(aaa)); 
console.log(JSON.stringify(bbb)); 

Comments

[toutou]

プログラムは上から順にという原則どおりかと思ったらそうじゃないんですね。配列だけ別扱いなのかな。ありがとうございます。

Answer 2

私も前にあれっと思いました。
親切なのか余計なお世話なのか分かりませんが、私なんかついプルダウンの下には詳細があると思ってしまいますが、[i]アイコンが表示されホバーすると
value below was evaluated just now
とあるので実行時点の値は右に、最終的には下のような値になっていると表現しているんだと思います。

Comments

[toutou]

なんでこんなややこしい仕様にしたんでしょうな。少し使いづらい気がします。ありがとうございます。