Use forEach to iterate over an array of Array (n), an array of undefined values

Question

I want to quickly build an array of length n using the array constructor Array() , and then go through the resulting array.

Per MDN docs :

If the only argument passed to the Array constructor is an integer between 0 and 2 ³² -1 (inclusive), this returns a new JavaScript array with the length set to that number. If the argument is any other number, a RangeError exception is thrown.

Presumably, executing Array(5) creates an array of length 5, which it makes.

 var arr = new Array(5); console.log(arr); // [undefined x 5] console.log(arr.length); // 5 

However, when I try to iterate over the resulting array and exit the values ​​or index, nothing happens.

 arr.forEach(function(v, i) { console.log(v, i); }); // nothing logs to the console 

Alternatively, if I use an array literal and try to loop over the values, it is logged as expected:

 [undefined, undefined].forEach(function(v, i) { console.log(v, i); }); // undefined 0 // undefined 1 

Why can't I iterate over the array created by the Array constructor?

---

This answer explains some browser oddities that occur with map , for example:

 arr.map(function(v, i) { return i; }) // returns [undefined x 5] 

But I am particularly interested in why the forEach loop does not iterate over all values.

Answer 1

I understand that I do not answer the question directly, but I still think that this gives good information.

Check out what Kyle Simpson recently said about this topic.

Basically,

 console.log(new Array(5)) // Chrome: [undefinedx5] Firefox: [ <5 empty slots> ] 

and

 console.log([undefined, undefined, undefined, undefined, undefined]) // [ undefined, undefined, undefined, undefined, undefined ] 

- completely different types of values. And the browser (sort of) lies with you when it says undefinedx5. Using .map () in the first case will not return anything, and in the second case, you can perform operations with undefined.

From spec, ecma-262 / 5.1 / # sec-15.4.2.2 , the only thing new Array(5) does is create an object of type Array with the property length = 5. The syntax of the letter array [] actually puts the types (if you give something) to the slots.

Answer 2

This is because ES5 array methods skip missing indexes. That is, they repeat i from 0 to length-1 , but at each iteration they check whether the array has property i .

If you want it to work, you can use fill to create indexes.

 var arr = new Array(5).fill(); arr.forEach(function(v, i) { console.log('arr['+i+'] = ' + v); }); 

Answer 3

It looks like you have a typo in your code:

 arr.forEach(functio(v, i) { 

Use this instead:

 arr.forEach(function(v, i) { 

UPDATE

forEach () executes the provided callback once for each element present in the array, in ascending order. It is not called for index properties that have been deleted or uninitialized (i.e., on sparse arrays). MDN Article

Answer 4

I suspect this may be due to the complexity of the Javascript foreach loop, and not the Array (int) constructor. Using the normal cycle:

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

gave the desired result.