Sparse arrays and reduce in JavaScript

One would think that in JavaScript: var array = [1,2,undefined,4]; is the same as:

var array = [1,2];
array.length = 3;
array.push(4);

but it's not. This code shows it:

var array1 = [1,2];
array1.length = 3;
array1.push(4);

var array2 = [1,2,undefined,4];

traverseArray(array1);
traverseArray(array2);

function traverseArray(array) {
  console.log("trying: " + array);
  console.log("reduce:");
  array.reduce(function(prev, current, index, array) {
    if(current === undefined) {
      console.log("Found undefined");
    }
    console.log(index+": " +current);
  }, undefined);

  console.log("for loop:")
  for(var i=0;i < array.length;i++) {
    var current = array[i];
    console.log(i+": " +current);
  }
  console.log();
}

Output:

trying: 1,2,,4
reduce:
0: 1
1: 2
3: 4
for loop:
0: 1
1: 2
2: undefined
3: 4

trying: 1,2,,4
reduce:
0: 1
1: 2
Found undefined
2: undefined
3: 4
for loop:
0: 1
1: 2
2: undefined
3: 4

Why is undefined in array1 not the same as undefined in array2 and why does the for loop act the same but reduce does not?

Solution

array1 has three numerically-named properties: 0, 1, and 3.

array2 has four numerically-named properties: 0, 1, 2, and 3. The value of the property named 2 happens to be undefined.

When you ask an object for the value of a property it doesn't have, the result is undefined.

In the for loop, you ask each array for the values of its properties named 0, 1, 2, and 3. For array1, the property named 2 does not exist, so the property access produces undefined. For array2, the property does exist, but its value actually is undefined, so you get the same result.

On the other hand, reduce only operates on properties that actually exist. From the ECMAScript specification, this is how reduce loops over arrays, using a counter k:

Repeat, while k < len

Let Pk be ToString(k).

Let kPresent be the result of calling the [[HasProperty]] internal method of O with argument Pk.

If kPresent is true, then... [use the value at index k for the reduce call]

So, we can see that an index is only used if passes a [[HasProperty]] check. array1 does not have a property named 2, so that index is skipped.