Using a for each loop on an empty array in JavaScript

Question

I've found that I can't use a for each loop on an empty array in javascript. Can anyone explain to me why this is?

I've initialized an array in javascript like so:

var arr = new Array(10);

when I use a for each loop on the array nothing happens:

arr.forEach(function(i) {
    i = 0;
});

the result is still an array of undefined values:

arr = [ , , , , , , , , , ];

I think that maybe since each item in the array is undefined, it doesn't even execute the forEach. I would think that it would still iterate through the undefined items. Can anyone explain why this is occurring? This question is not asking how to most efficiently fill an array with zeros, it's asking details on the interaction of a for each loop and an empty array.

Answer 1

You can use a forEach like you intended if you modify the array initialization to be:

var arr = Array.apply(null, Array(10))

And then you can do a foreach like:

arr.forEach(function(el, index) {
    arr[index] = 0;
});

The result is:

[0, 0, 0, 0, 0, 0, 0, 0, 0, 0]

Answer 2

You're half-way right!

I think that maybe since each item in the array is undefined, it doesn't even execute the forEach.

Array.prototype.forEach does not visit indices which have been deleted or elided; this is a process called ellision. So, it executes, but skips over every element.

From MDN:

Answer 3

.forEach runs your function for each element in the array. Setting the value of i does nothing, it's not a reference.

Just use a normal for loop:

for(var i = 0; i < arr.length; i++){
    arr[i] = 0;
}

Or instead of doing new Array(10), you can just do:

var arr = [];
for(var i = 0; i < 10; i++){
    arr[i] = 0;
}

Answer 4

Based on Faris Zacina answer, a one line approach.

var zeros = Array.apply(null, Array(10)).map(function(){return 0})

Answer 5

Controlling what is 'elided'

As mentioned, the key being present is what determines if forEach hits, and the length just decides the range of keys to check.

Another interesting perspective on this is that you can control what is visible to forEach and other iterative methods using a Proxy with has trap.

here we filter the odd indicies.

let arr = ['zero', 'one', 'two', 'four']
arr.length = 6

let arrProxy = new Proxy(arr, { has(arr, k){ return k%2===0 } })

arrProxy.forEach( val => { console.log(val) })
//zero
//two
//undefined

Such a strategy also lets you get to other behaviors,

if instead of k%2===0 you had

• true you would hit all the empty space.
• k != undefined lets you iterate over defined values only.
• k in arr takes you back where you started.

of course you should use filter in most situations, this is just a demonstration.

Answer 6

I hope someone can correct me if i'm wrong about this

Inside the V8 source code array.js:1042, I found this:

for (var i = 0; i < length; i++) {
      if (i in array) {
        var element = array[i];
        f(element, i, array);
      }
      //...

The important bit is the condition check using the 'in' operator to determine whether or not to execute the function argument passed into the forEach. The in operator checks for the existence of properties inside an object.

Now a JS array is simply a fancy object with numbered properties. Ie

var array = [undefined,undefined,undefined];
Object.keys(array); // ["0", "1", "2"]

Another way of thinking about the above array is by thinking of it as an object like this

{
  "0": undefined,
  "1": undefined,
  "2": undefined
}

However if you use the other form for constructing the array, you get this:

var array2 = new Array(3);
Object.keys(array2); // []

This is why you will get the following result:

var array = [undefined,undefined,undefined];
var array2 = new Array(3);

array.forEach(function(){console.log('foo')}); //will print foo three times
array2.forEach(function(){console.log('bar')}); //will print nothing