125

This 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);

Produces the following output in Chrome:

foo1 
[Object, Object, Object, Object, Object]  5
    0: Object
    1: Object
    2: Object
    3: Object
    length: 4
    __proto__: Array[0]
     5 (index):23
foo2 
[Object, Object, Object, Object]  4
    0: Object
    1: Object
    2: Object
    3: Object
    length: 4
    __proto__: Array[0]

Fiddle: http://jsfiddle.net/2kpnV/

Why is that?

4
  • See also console.log() async or sync?
    – Bergi
    Feb 14, 2020 at 21:30
  • 1
    @Bergi Would you have a strong objection to switching the linked question to be a duplicate of this one, rather than the other way around? I think the top answer here is notably better. (concise, recommends method which will properly log deep object structure.) Answer-votes per question-vote and per visitor also seem to agree. I'd be happy to talk on Meta for longer discussion and input from others if needed Feb 23, 2020 at 7:30
  • @CertainPerformance The current canonical is older, has a better title, and better question text (with simple example and including screenshot). I agree that the accepted answer here gives a better explanation and a solution (although not a solution for arrays, which these questions are about). How would you feel about getting the questions merged?
    – Bergi
    Feb 23, 2020 at 16:03
  • @Bergi No, do not merge it. The title of the question is not great, but it's precisely the title that brings users to this question. The link to the other duplicated question is fine. Feb 23, 2020 at 19:07

2 Answers 2

190

Examining objects via console.log happens in an asynchronous manner. The console receives a reference to the object synchronously, but does not display the properties of the object until it is expanded (in some cases, depending on the browser and whether you have dev tools open when the log happens). If the object has been modified before examining it in the console, the data shown will have the updated values.

For example, Chrome will show a little i in a box which, when hovered, says:

Object value at left was snapshotted when logged, value below was evaluated just now.

to let you know what you're looking at.

One trick for logging in these cases is to log the individual values:

console.log(obj.foo, obj.bar, obj.baz);

Or JSON encode the object reference:

console.log(JSON.stringify(obj));
8
  • 25
    As stated in another answer, JSON.parse(JSON.stringify(obj)) may be much better to see the log as a json object instead of a string Apr 7, 2017 at 12:51
  • 4
    or: console.log( Object.assign({}, obj) ); - this will create a new copy of object.
    – cimak
    Jul 21, 2017 at 11:59
  • 12
    What is the reasoning behind Chrome doing this instead of showing the value as it was at the time of logging? Wouldn't that be more useful?
    – ESR
    May 31, 2018 at 4:53
  • 3
    @cimak, for some reason I am still getting an object that shows the last values of it's properties when using console.log(Object.assign({}, obj)). Using console.log( JSON.parse(JSON.stringify(obj)) ) does show the values at the time of output.
    – Peter
    Oct 3, 2018 at 14:03
  • 4
    @Peter - i was partly wrong, Object.assign will work only for object that contain primitive values only (because Object.assign makes shallow copy, not deep copy). If obj contain another object, then value of that nested object will be "evaluated" separately.
    – cimak
    Oct 3, 2018 at 16:50
1

Redefining console.log will solve the problem.

var originalLog = console.log;
console.log = function(obj) {
    originalLog(JSON.parse(JSON.stringify(obj)));
};
1
  • 15
    It's not so useful because in console it will display the number of line where this function is defined instead of actual line where I call console.log Sep 4, 2017 at 10:28

Not the answer you're looking for? Browse other questions tagged or ask your own question.