Object assign manipulating objects before assign being executed. How?

Question

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!

score 0 · Accepted Answer · answered May 16 '18 at 09:50

0

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.

answered May 16 '18 at 09:50

Máté Safranka

4,081
1
10
22

"as it is right now", but then it should not have "InstanceMatrix" in it, because "Vertices" does not contain "InstanceMatrix" right now. The assign is AFTER the console.log ... I do not understand what you are trying to tell me ... – z0rberg's May 16 '18 at 09:52
Okay, "right now" was a poor choice of words on my part... what I mean is that it's always up-to-date. It lists the *latest* state of the object. Is that clearer? – Máté Safranka May 16 '18 at 09:54
No, because the latest state is the state without "InstanceMatrix" in it. I have read the answer linked at the top, and it states that console.log apparently lags behind and shows the state of objects LATER in the code ... which I guess answers my question, and is a horrible thing to do. Thank you for your effort! – z0rberg's May 16 '18 at 10:02

Object assign manipulating objects before assign being executed. How?

1 Answers1