Console.log: the length of array is 0 and 1 at same time

Question

About the console.log, i believe i have a case related to

In my console i got

my code related at 24

const lists = this.props.localData.lists;
if(lists.length === 0 ) {
  console.log('lists',lists);
}

What is going on here?

if it is right in its way, how could i access lists[0](undefined)?

could anyone give me a hint?

Thanks in advance.

Please see [*How to create a minimal, complete and verifiable example*](http://stackoverflow.com/help/mcve). The *console* object is implementation dependent, it's not necessarily consistent. — RobG, Jun 25 '17 at 02:02
Well, the linked question's answer is probably valid here, too. So you need to inspect the code following the console.log call and see if the element is added there. You can use the debugger for that. — le_m, Jun 25 '17 at 02:05
Your array had a length of 0 at the moment it was logged, but at the moment you are looking at the log, it has length 1. — JLRishe, Jun 25 '17 at 02:05
@JLRishe But it shouldn't happen if we try to print the array again in the console, should it? I see `Array(0)` no matter what I do. — 11thdimension, Jun 25 '17 at 02:11
you only log the array if its length is zero, so the only output in the console would be when the array has length zero - subsequent changes to the array will be "visible" in the console because that's how the console works — Jaromanda X, Jun 25 '17 at 02:16
@11thdimension If you're talking about that `Array(0)` next to `__proto__`, that is the array's _prototype_. It should always have a length of zero. — JLRishe, Jun 25 '17 at 03:50

score 1 · Accepted Answer · answered Jun 25 '17 at 06:24

Some of the comments hinted at the issue here, but I don't see one that fully and correctly explains it. Here is what happened.

The initial one-line display of the array is created at the time you call console.log(). Simply viewing the log doesn't change anything (contrary to what one or two comments say). And subsequent updates to the array don't change this one-line view either.

But when you click the little triangle to expand the log entry, the expanded multiline display is created using the current array contents at the time you click the triangle. That is what causes the difference between the two. Your array was empty when you called console.log(), and you added an element to it after that but before you clicked to expand the display in the console.

If you want to get a full view of the array as it exists at the moment of the console.log() call, a good way to do it is to use JSON.stringify(). You can use the third argument to this function to pretty-print the result. So in your example, you might use:

console.log( JSON.stringify( lists, null, 4 ) );

Thanks Michael, so in this case `debugger` is a better choice? — Seeliang, Jun 25 '17 at 22:53

score -1 · Answer 2 · answered Jun 25 '17 at 02:05

Check this out: foo = [] create a new array and assigns a reference to it to a variable. Any other references are unaffected and still point to the original array.

foo.length = 0 modifies the array itself. If you access it via a different variable, then you still get the modified array. Lucky with that.

Console.log: the length of array is 0 and 1 at same time

2 Answers2