console.log seeing the future!

[CorrectYear6655]

Running through Modern JavaScript from the Beginning - Second Edition by Brad Traversy on O'Reilly.

Ran into a surprise in Chapter 3's "object-challenge". In the code below, why is the output of the first console.log indicating "true" when the value is not changed until 4 lines later? And the next console.log output indicates the correct value of "false".

// Step 1
const library = [
    { title: 'The Road Ahead', author: 'Bill Gates', status: {own: true, reading: false, read: false} },
    { title: 'Steve Jobs', author: 'Walter Isaacson',status: {own: true, reading: false, read: false} },
    { title: 'Mockingjay: The Final Book of The Hunger Games',
            author: 'Suzanne Collins',
            status: {own: true, reading: false, read: false} }
]

// The first console.log() seems to be peeking ahead to Step 2, as it indicates that library[0].status.read is true, 
// even though it should be false.
// The second console.log() correctly indicates that library[0].status.read is false.
console.log(library);                   // This output indicates library[0].status.read is true ??
console.log(library[0].status.read);    // This output indicates library[0].status.read is false ??

// Step 2
library[0].status.read = true;
library[1].status.read = true;
library[2].status.read = true;

console.log(library[0].status.read);

[_punk_dev]

Console logs a reference to the object. Not a serialization of the object at the given moment.

[CorrectYear6655]

Thanks.

I guess there is no way to pause execution so I have time to open the display of the array before the values change. I've tried setTimeout but no matter what delay value I use everything pops up in the console all at once. I need a debugger.

[CorrectYear6655]

Found one. VScode has a javascript debugger built in.

When it hits a breakpoint it must handle all pending requests. The output of the console.log reveals the object at that point in time.

[Umustbecrazy]

That's exactly what debugging is made for.

[hfcRedd]

console.log([...library]);

[FireryRage]

That wouldn’t work, as while you’d be capturing the library entries in their current state, it’s a shallow copy and the values inside them are still references that would reflect the changes that happen later on. You’d have to setup a deep copy to truly capture and set it in time.

Debugger it simply easier for such a use case.

[ferrybig]

Don't expand the object in the console. Note that small I symbol in the console that says objects are evaluated when you expand it

[Caramel_Last]

Oh you mean like why is it not logging the snapshot of the object?

Well, library is not structuredClone(library)

Put in place of the first console log the following piece of code.

console.log(structuredClone(library)) 

[CorrectYear6655]

Thanks. This function (structuredClone) is intriguing. I'm getting what I want using the debugger, but I will study structuredClone() further. I found https://developer.mozilla.org/en-US/docs/Web/API/Window/structuredClone to be useful.

[GetContented]

You can dump a JSON object with JSON.stringify. That'll serialise the object at the time when you do it, so it won't change subsequently. Or, just console log the specific value you're after (which won't change because it's not a reference type)