2

In Chrome 39 developer tools, this code:

var something = [
    {x: 'foo'},
    {x: 'foo'}
];

console.log(something);

something.forEach(function (element) {
    element['x'] = 'baz';
});

... outputs:

enter image description here

Why does console.log output modified values even before they have been modified?

A similar question from 2012 explains that due to a chromium bug, console.log is "delayed" (does not stringify the input object immediately). But the bug is marked as fixed, so why is this still happening several years later?

Community
  • 1
  • 1
mtmacdonald
  • 14,216
  • 19
  • 63
  • 99
  • 1
    your developer tools also help you if you set a brake point at console.log position and add `watch expression` "something" http://i.stack.imgur.com/xg9rr.png – caramba Feb 27 '15 at 13:43

2 Answers2

4

It doesn't.

When you output an object with console.log, the object is output "by reference"; the values in the console are dynamic, and they will update to reflect the current state of the object.

If you want to output a static string of text about the object, use console.dir

user229044
  • 232,980
  • 40
  • 330
  • 338
3

Whenever you click on the array of objects, it shows you the updated objects, and not a snapshot of how they looked when you did the console.log.

Think of it as an array of references to the corresponding objects.

Omri Aharon
  • 16,959
  • 5
  • 40
  • 58