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

user_5451765 0
Viewed 59

This program:

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

Outputs this:

(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 a "foo" eventually, of course):

(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 is the output different ? Shouldn't the 2 arrays be equivalent ?

Running in Chrome version 58.

javascript
1 Answers

They're not equivalent.

The first one is sparse with only a single member at index 100. The second one has 101 members, most of which are the value undefined.

A sparse array is one where there are fewer members than the .length suggests. So if you have an array where .length is 101 and all indices have a value, it's not sparse, but if there are "holes" where an actual index/value is missing, it's a sparse array.

To check if an array is sparse, you can compare its .length to the .length of the result of Object.keys.

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

To check if a single member is actually defined or not, use the in operator: 3 in arr Or the .hasOwnProperty() method: arr.hasOwnProperty(3)

user_86438520
Related