Question

76

Weird behavior with objects & console.log

rated 0 times [ 77] [ 1] / answers: 1 / hits: 76357 / 10 Years ago, fri, may 2, 2014, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

alejandro

Add To Favorites

Follow

Total Points: 231

Total Questions: 102

Total Answers: 107

Location: Jordan

Member since Wed, Jun 17, 2020

4 Years ago

alejandro questions

1 Discord.js v13 code breaks when upgrading to v14

Mon, Jul 18, 22, 00:00, 2 Years ago

1 React Image Magnifiers not working when zoom in using nextjs

Fri, Sep 18, 20, 00:00, 4 Years ago

1 Discord.js bot responds when mentioned

Thu, Sep 10, 20, 00:00, 4 Years ago

1 how to get input field value on button click in Vuejs or in vanila javascript?

Sun, Aug 9, 20, 00:00, 4 Years ago

1 How do I set a user's voice channel when I have the user's id?

Thu, May 21, 20, 00:00, 4 Years ago

View All

answered 10 Years ago kurtisl · Accepted Answer

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