So I was debugging one day when I came across this case in JavaScript.
var arrayA = [1, , 1],
arrayB = [1, void 0, 1];
Now at first glance arrayA
and arrayB
look similar but when I tried this code in the Google Chrome Developer Console, things got weird:
As you can see here, arrayB
(the second one) has all it's members listed, including the undefined
element.
But it's not the same with arrayA
, ignoring the second member (arrayA[1]
) even though it's undefined
.
There's a problem here when it comes to how arrayA
and arrayB
are indexed, even though they are practically the same.
Everything is fine and dandy when iterating through arrayA
using for
and for...of
statements but when using the for...in
statement, the array's second element (arrayA[1]
) is skipped over.
However, every element of arrayB
was recognized when using all for
loop variations.
This has also been tested on Mozilla Firefox and Microsoft Edge as well with the same results.
Is there any explanation for why this is so? Why is arrayA
treated differently (no matter how slightly) from arrayB
— using for...in
statements?
I apologize if the images aren't ideal, they were just to show I was using the Google Chrome Developer Console.
And my thanks in advance for anyone willing to answer the question.
EDIT
Just to add, the custom
depth
property in the arrays do not have any effect on the arrays, even without them I still get the same result.