Why Does `console.log` Show Outdated Object Information After Modification in JavaScript?

Unveiling the Secrets of console.log and Object Manipulation

When working with arrays and objects in JavaScript, the behavior of console.log can sometimes be puzzling. Consider the following code:

foo = [{id: 1},{id: 2},{id: 3},{id: 4}, {id: 5}, ];
console.log('foo1', foo, foo.length);
foo.splice(2, 1);
console.log('foo2', foo, foo.length);

In browsers like Chrome, this code produces the following puzzling output:

foo1 [Object, Object, Object, Object, Object]  5
foo2 [Object, Object, Object, Object]  4

Why does foo2 show the updated array length (4) but still displays five objects?

Examining Objects in Console.log

The reason lies in how console.log handles objects. When logging an object, the console receives a reference to it synchronously. However, the actual display of the object's properties occurs asynchronously, often after the object has been modified.

As a result, you may see outdated information when expanding the logged object in the console. To avoid this confusion, the console displays a small "i" in a box indicating that the value shown was snapshotted at the time of logging, even though the object may have changed since then.

Logging Strategies

To circumvent this issue, consider using one of the following techniques:

• Log individual object values: console.log(obj.foo, obj.bar, obj.baz);
• JSON encode the object as a string: console.log(JSON.stringify(obj));
• Re-encode the object with JSON to maintain inspectability: console.log(JSON.parse(JSON.stringify(obj)));

Note that JSON has its limitations, as it strips non-serializable properties and fails on circular references. For more complex scenarios, consider using custom deep-copying mechanisms.

The above is the detailed content of Why Does `console.log` Show Outdated Object Information After Modification in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!