[] vs [{…}] in browser tools, while both having same objects

Question

If you look at the picture both arrays consist of same kind of object. first I create it with empty data as placeholder, but second one I create it with data coming fro

Answer 1

The opening line, [] or [{}], is immediately drawn in the console.

In the case of [], there was nothing in the array at logging time, so the browser draw it as an empty array. But the data was present when you looked at it and clicked on the small triangle, later.

You can reproduce this behavior with this code in your console:

;(function(){ let arr=[]; setTimeout(()=>{ arr[0] = {b:3}; }); return arr;})()

So the difference you saw is related to the (a)synchronicity of array filling.