JavaScript: Why is the console output of these two seemingly equivalent programs subtly different?

Question

This program:

 var arr = [];
    arr[100] = "foo";
    console.log(arr);

Outputs the following:

(101) [undefined × 100, "foo"]

However, this program:

var arr = [];
for(var i = 0; i < 101; i++) {
arr[i] = (i === 100 ? "foo" : undefined);
}
console.log(arr);

Outputs this (there is, of course "foo"):

(101) [undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined…]

I could be nitpicking, but I just want to make sure why the output is different? Shouldn't 2 arrays be equivalent?

Works in Chrome version 58.

Answer 1

They are not equivalent.

The first one is sparse with only one element in the index 100. The second has 101 elements, most of which are meaning undefined.

- , , .length. , , .length 101, , , "", /, .

, , .length .length Object.keys.

var isSparse = arr.length !== Object.keys(arr).length;

, , in: 3 in arr .hasOwnProperty(): arr.hasOwnProperty(3)