Understanding Array Length vs. Property Length?

Question

I have the following code that inserts information into an array. For this example, I'm inserting just the index. When looking at the Chrome Console, I can see that the length of the array is correct (11) [6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]. However, when I expand the array, there's duplicate information and it's saying the length is 34? I am seeing the following:

       (11) [6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]
        0: 6
        1: 7
        2: 8
        3: 9
        4: 10
        5: 11
        6: 12
        7: 13
        8: 14
        9: 15
        10: 16
        11: 6 // seems to repeat itself?
        12: 7
        13: 8
        14: 9
        15: 10
        16: 11
        17: 12
        18: 13
        19: 14
        20: 15
        21: 16
        22: 6
        23: 7
        24: 8
        25: 9
        26: 10
        27: 11
        28: 12
        29: 13
        30: 14
        31: 15
        32: 16
        33: 17 // where is this 17 coming from?
        length: 34

Does anyone know why am I seeing 34 as the length when I expand?

Code:

var html = $($(xml).find("filters").html()).find("li");
var inputs = $(html).find("input");

var types = [];
inputs.each(function(index) {
    if ($(this).prop("id").indexOf("filter-types") >= 0)
    {
        types.push(index);
    }
});
console.log(types);

Where or what is `inputs` and is the array you show `types` ? add a `debugger;` above the `if` statement and step through the code in the browser console. — Nope, Apr 27 '18 at 16:28
maybe a working jsfiddle would be helpfull. What is the initial value of types? — fethe, Apr 27 '18 at 16:29
Note objects in the console are updated when you expand them, with the exception of the first line of the log. So more than likely whatever code you are using is manipulating the array after you have logged it, but before you expanded the array — Patrick Evans, Apr 27 '18 at 16:32
I've stepped through the code and the push is only triggered 11 times. I don't understand the inconsistency between the array length and the number when I expand the array — Michael, Apr 27 '18 at 16:34
Where in your code are you logging the array? arrays don't just magically double in length. There must be a cause. — Kevin B, Apr 27 '18 at 16:35
I just updated code. I'm logging types after the inputs.each — Michael, Apr 27 '18 at 16:37
then what you are describing is impossible. There must be more to the code — Kevin B, Apr 27 '18 at 16:38
@Michael Whatever you logged in that screenshot is not an array. It looks like a jQuery object. It's certainly not an array created as a literal like `var types = []`. — Paul, Apr 27 '18 at 16:39
Look through the rest of your code for references to your array variable/reference. You should be seeing some code that is also adding to it. Also possible duplicate of [console.log() async or sync](https://stackoverflow.com/questions/23392111/console-log-async-or-sync) — Patrick Evans, Apr 27 '18 at 16:41
Could it be because var types = [] is declared outside jQuery function: http://prntscr.com/jax0j3 ...the rest of the code is inside jQuery function — Michael, Apr 27 '18 at 16:41
@Michael You're either logging something other than `types`, or you're overwriting it somewhere (look for things like `types =` in your code). `types` as you've shown is an array, but the value you've logged is not an array at all (array logs don't start with `m.fn.init`). I believe you're logging a jQuery object. — Paul, Apr 27 '18 at 16:43
@Michael Yes, that is a rather important difference between the code you provided and the code you have. — Kevin B, Apr 27 '18 at 16:46
Confused why this question is voted negatively? Looks like some people need to read this and be more kind to the community :) https://stackoverflow.blog/2018/04/26/stack-overflow-isnt-very-welcoming-its-time-for-that-to-change/?cb=1 — Michael, Apr 27 '18 at 21:33
@Michael as to why you are getting down voted (not by me) examine the fact that given the provided code and nothing that it runs against (what is `xml`?), we cannot reproduce this. AND the fact that your images posted in comments do NOT match the code provided in the question either. The only other alternative would be to vote to close as unpronounceable which would be accurate. The length (34) matches with your INPUTS in the image in the comment. — Mark Schultheiss, May 02 '18 at 17:25

HMR · Answer 1 · 2018-04-27T19:39:48.207

console.log will show the logged object as it is right now so when you expand it it may be different than the preview that's showing.

When you run the following in the console

var arr = [1,2,3];
console.log("different when you expand",arr);
console.table(arr);
setTimeout(()=>{
  Array.from(new Array(100),()=>0).forEach(()=>arr.push(arr.length))
},10);

It will show: different when you expand (3) [1, 2, 3] but when you expand it you can see the array does not have a length of 3 anymore and no longer the values 1,2,3.

Console.table will show the object the way it is when you print it out.

Understanding Array Length vs. Property Length?

1 Answers1