Why does console log, log out a variable thats already been assigned as the new assignment

Question

I am sort of new to Javascript and wanting to clear something up, I have read something about Hoisting and feel this might be the reason and answer to my question but why does the log, log out the last assignment to my constant ?

const people = [

    {
        name: "Roger",
        age: 29,
        role: "Secret Agent"
    }, 
    {
        name: "Jamie",
        age: 35,
        role: "Secret Agent"
    }
]

console.log("people", people);

people[0].name = 'bob';

console.log("people", people);

Both results display bob and not Roger then Bob.

It would be great if somebody could explain why this happens.

That is because of how the browser's console works, it only resolves the reference to an object when you expand that object in the console. — Titus, May 16 '19 at 12:21
just like @Titus says. I always forgot this tho. A good way to avoid those kind of black magic when logging objects to the console, is to always log the JSON format of the object: `console.log('people:', JSON.stringify(people))`; — Sergeon, May 16 '19 at 12:24

score 3 · Accepted Answer · answered May 16 '19 at 12:42

This is an implementation quirk. Chrome (V8) and Firefox (SpiderMonkey) will resolve to the object at the time you expand the object in the console. Behind the scenes, the value might have changed. WebKit (Safari) will log it as it is. If you want to capture the object as it is at a certain point in time, use console.log(JSON.parse(JSON.stringify(obj)));

[1] https://developer.mozilla.org/en-US/docs/Web/API/Console/log#Logging_objects

P.S Javascript is littered with these kinds of quirks. Not to discourage you, but what should be is quite frequently not what it is. This example also draws close parallels to asynchronous programming in javascript which can be jarring to those coming from procedural backgrounds. To oversimplify, your value will change behind the scenes before you reach the next line and thus it's a good idea to understand the event loop, callbacks and subsequently promises and async/await.

Thank you for the swift and detailed reply :D – Shaun Clark May 16 '19 at 12:59 — Shaun Clark, May 16 '19 at 12:59

score 1 · Answer 2 · answered May 16 '19 at 12:40

Please look at this question: console.log() shows the changed value of a variable before the value actually changes. This is a bug that only happens with console.log. Unless you are relying on console logging for what you are trying to create, this shouldn't be a problem.

Why does console log, log out a variable thats already been assigned as the new assignment

2 Answers2