forEach on array of undefined created by Array constructor

Question 1

Array(5) is essentialy equivalent to

var arr = []; 
arr.length = 5;

In javascript changing array's length doesn't set any values for it's numeric properties nor does it define those properties in the array object. So numeric properties are undefined instead of having undefined value. You can check it by using:

Object.keys(arr)

When iterating javascript iterates through numeric properties of the array, so if these don't exist, there is nothing to iterate over.

You can check it by doing:

var arr = Array(5)

//prints nothing
arr.forEach(function(elem, index, array) {
    console.log(index);
});

arr[3] = 'hey'
//prints only 'hey' even though arr.length === 5
arr.forEach(function(elem, index, array) {
    console.log(index);
});

The following code:

var arr = [undefined, undefined];

creates and array of length ===2 and sets the both numeric properties 0 and 1 to undefined.

Question 2

Looking at a simplified implementation of .forEach() may help.

Array.prototype.my_for_each = function(callback, thisArg) {
    for (var i = 0; i < this.length; i++) {
        if (i in this) {
            callback.call(thisArg, this[i], i, this);
        }
    }
};

So you can see that what happens is that the method does iterate the entire Array (according to the spec), but it only invokes the callback if the member actually exists. It checks by looking for the property (the index) using the in operator, which tests to see if the object either has or inherits the property.

If in shows that the index exists, the callback is invoked.

So given this Array:

var arr = ["foo", "bar", "baz"];

This will output all 3 items:

arr.my_for_each(function(item) {
    console.log(item);
});
// "foo" "bar" "baz"

But if we use delete to remove a member, it leaves a hole in the Array, which will now get passed over.

delete arr[1];

arr.my_for_each(function(item) {
    console.log(item);
});
// "foo" "baz"

When you created an Array using Array(5), it created one without any members, but with the .length set to 5. So this is an example of a sparse Array (very sparse in this instance). Because none of the indices will be found by in, the callback is never invoked.

Question 3

You can use Array.from to create an array and pass lambda function that will be invoked on each item in the array. detailed documentation

  const arr = Array.from(
      { length: 5 },
      () => 0
  )

  console.log(arr)

Question 4

Other answers have explained the problem, but not provided solutions.

ES6 Spread syntax fills in sparse values with undefined. So does Array.apply(null, sparseArray), which has the benefit of working in older browsers, but takes a bit more work to understand.

const sparseArray = new Array(5);
const unsparseArray1 = Array.apply(null, sparseArray);
const unsparseArray2 = [...sparseArray];

function arrayApply() {
  // ES5 forEach works with either approach
  unsparseArray1.forEach(function(elem, index, array) {
    console.log(index);
  });
}

function es6Spread() {
  // Lodash each works with either approach
  _.each(unsparseArray2, function(elem, index, array) {
    console.log(index);
  });
}

<html><head>
  <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
  <title>Making sparse arrays unsparse</title>
</head><body>
  <p><button onclick="arrayApply();">Array.apply(null, sparseArray)</button></p>
  <p><button onclick="es6Spread();">[...sparseArray]</button></p>
</body>
</html>

Question 5

In my case, I was looking for an elegant solution to creating an array of digits starting with 0 to X.

In an elegant manner with arrow functions, it comes up with a 1 line of code

const arrayLength = 10;
const arrayOfDigits = Array.apply(null, Array(arrayLength)).map((_, index) => index);

Appeared to me quite a sophisticated one, much more than a separate block of code with a for cycle.