Q:

Object assign manipulating objects before assign being executed. How?

I have come across a really weird problem that baffles me so much, I have to ask what is going on.
This short code snippet is more or less directly copied from my code. 
<script>
    Vertices    = { Vertex  : { numComponents: 2, data: [], }   }
    console.log(Vertices)

    Matrices = new Float32Array(16*4);
    Matrix = new Float32Array(Matrices.buffer, 1 * 16 * 4, 16);

    Object.assign(Vertices,
    {
        InstanceMatrix  :   { numComponents: 16, data: Matrices, divisor: 1 },
    } );

    console.log(Vertices)
</script>

Now, what boggles my mind is the output of these two commands.
The top one outputs:
{Vertex: {…}}
InstanceMatrix: {numComponents: 16, data: Float32Array(64), divisor: 1}
Vertex: {numComponents: 2, data: Array(0)}
__proto__: Object

And the bottom one:
{Vertex: {…}, InstanceMatrix: {…}}
InstanceMatrix: {numComponents: 16, data: Float32Array(64), divisor: 1}
Vertex: {numComponents: 2, data: Array(0)}
__proto__: Object

How is it possible that the top console.log command shows "InstanceMatrix" in the Object "Vertices" despite it being assigned AFTER the log command?
Side question: Why does the bottom one actually differ from the top one?
Thank you!

A:

This is just a quirk of the console. The first line you see ({Vertex: {…}}) is the result of the toString() method of the object which, as you expect, captures the object's state at the moment it's called. The details printed below come from the console, and they are "live", i.e. they always reflect the state of the object as it is right now.

