Different Array(s) in Chrome Dev Tools

Question

Why does Chrome Dev Tools put a "(3)" in front of the fruit array, but not the array of years?

The first one is the result of a fetch like so:

    fetch('http://localhost:8000/damagequery')
  .then(response => response.json())
  .then(data => {
      data.forEach(element => {
          console.log(element[""][1])
          damageCount.push(element[""][0])
          year.push(element[""][1].toString())
        //   [0][""]
        // [0][""][0]
      });
  });

and the second is just a test like this:

let fruit = ['Apples', 'Bananas', 'Oranges']

well, you see how the dev tools put a "(3)" in front of the fruit array, but not the year. Why is that? — Matt, Mar 08 '21 at 15:08

score 1 · Accepted Answer · answered Mar 09 '21 at 08:47

1

The reason is very simple, year array is logged to the console before it is filled. You used fetch which is asynchronous, so it is called after console.log(year), but due to references in JS, the array is 'refreshed' after you click on it in console.

Similar situation below:

let year = [];
let fruit = ['Apples', 'Bananas', 'Oranges'];

setTimeout(function() {
    const response = ["2000", "2016", "2017"];

    response.forEach(element => {
        year.push(element);
    });
}, 500);

console.log(year);
console.log(fruit);

Live example: http://jsfiddle.net/BlackLabel/yzucwp5b/

answered Mar 09 '21 at 08:47

ppotaczek

36,341
2
14
24

Is this the same reason for when the console tells me: `0: (27) [empty × 24, Array(1), Array(1), Array(1)]` and when I click on it there are no empty arrays? – close Dec 07 '22 at 12:15
Hi @close, I am not sure, could you reproduce the problem in jsfiddle? – ppotaczek Dec 07 '22 at 12:19
Sorry, I don't know how. I am developing a userscript and this console message is bothering me. – close Dec 07 '22 at 18:52
You should try to extract the problem and make a working example with the related code in jsfiddle. Without that, it is really hard to help you. – ppotaczek Dec 08 '22 at 11:33

Stefan · Answer 2 · 2021-03-08T15:13:48.763

0

JS does array equality comparing the references, which means even if your arrays contain the same elements they won't be equal because they live at different memory addresses.

If you want to compare two arrays I would recommend using lodash. See an example here:

Using lodash to compare jagged arrays (items existence without order)

If you don't want to use lodash, you'll need to define your own logic:

const a = [1, 2, 3];
const b = [1, 2, 3];
const areEqual = a.length === b.lenght && a.every((elem, index) => elem === b[index]);

edited Mar 08 '21 at 15:13

answered Mar 08 '21 at 15:08

Stefan

160
6

Thank you for your suggestion, I edited my question to be more direct. I know that the contents of these two arrays are not the same because they're not supposed to be, I am more interested in why dev tools is displaying them differently. – Matt Mar 08 '21 at 15:17
Please see this thread. https://stackoverflow.com/questions/48120547/array-list-length-is-zero-but-array-is-not-empty – Stefan Mar 08 '21 at 15:25

score 0 · Answer 3 · answered Mar 08 '21 at 15:12

0

this question seems to be related to this one which has a very detailed response.

How to compare arrays in JavaScript?

answered Mar 08 '21 at 15:12

Yalung Tang

613
4
10

Thank you for your suggestion, I edited my question to be more direct. I know that the contents of these two arrays are not the same because they're not supposed to be, I am more interested in why dev tools is displaying them differently. – Matt Mar 08 '21 at 15:17
Take a look at this response, https://stackoverflow.com/questions/6355382/javascript-array-not-returning-the-correct-length "Regarding the output of console.dir: It is as I assumed. The properties of the object are fetched when you expand the entry in the console, not when you make the call." Did you use console.dir to create those logs? – Yalung Tang Mar 08 '21 at 15:33

Different Array(s) in Chrome Dev Tools

3 Answers3