When you log objects to the console, the object’s current state is not snapshotted and displayed (as you might expect); instead, the console gets a live reference to the object. When you expand it in the console, you see its contents as of when you expand it, not as of when you logged it. More on that in this question and its answers.
So apparently your collections are empty when you do your logging, and then gain their elements later. You just want to make your code wait until the collections are populated. For instance, if you’re doing this immediately when your script is run, consider putting the script at the end of the document, right before the closing </body> tag.
The very subtle blue (i) icon next to the object has a tooltip that’s useful; if you hover it you see:
It says “Object value at left was snapshotted when logged, value below was evaluated just now.”
But generally: Rather than stumbling around in the dark with a console.log torch, I suggest turning on the lights using the debugger built into your browser and/or IDE.