How does `new Array (5) .map ()` work?

Question

I recently discovered that displaying an uninitialized array does not seem to work as I expected. With this code:

function helloMap(value, index) { return "Hello " + index; } console.clear(); var initialArray = Array.apply(null, new Array(5)); console.log("Array initialised with apply:"); console.log(initialArray); console.log(initialArray.map(helloMap)); var normalArray = new Array(5); console.log("Array constructed normally"); console.log(normalArray); console.log(normalArray.map(helloMap)); 

 .as-console-wrapper { max-height: 100% !important; } 

I get different results, despite the first output for each array [undefined, undefined, undefined, undefined, undefined] .

The fact that I get different results implies that undefined in these two arrays is actually different. In the first, I suspect that the array has 5 elements, each of them is undefined. There are 5 elements left in the second array, but there is nothing even undefined there ...

This is a bit confusing.

Can someone explain this to me?

Answer 1

Array.apply(null, Array(5)) actually fills the array (or an object similar to an array) that you pass as the second argument with the value of the first argument that you pass, as seen in MDN Docs .

new Array(5) is just initializing the array with its length value given by argument 5 . Again, as can be seen in the MDN docs :

If the only argument passed to the Array constructor is an integer from 0 to 2 ³² -1 (inclusive), this returns a new JavaScript array with its length property set to that number ( Note: this means an array from arrayLength empty slots, not slots with actual values ​​undefined).

Answer 2

map not called about any elements of normalArray because there are no elements. A regular array is an array with 5 empty slots.

initialArray has 5 slots filled with undefined

Answer 3

I think here is your answer: mozilla developers

console.log(normalArray.map(helloMap)); will always fail because it works in context - creates a new array, but will not work with undefined values.

map calls the provided callback function once for each element of the array in order and creates a new array from the results. callback is only called for array indices that are assigned values, including undefined. It is not called for missing array elements (that is, indexes that have never been set, that have been deleted, or that have never been assigned a value).

Answer 4

According to MDN Array.prototype.map

maps the calls of the provided callback function once for each element to an array, in order, and builds a new array from the results. Call back only for indexes of the array which have assigned values , including undefined. It is not called missing array elements (that is, indexes that have never been set, that have been deleted, or that have never been assigned a value).

Both arrays differ in how Array.map performs the callback. Since there are no indexes in the second scenario, map returns empty

CAUSE

The answer lies in the Array constructor

In the first scenario, you pass an array with a length of 5 to the Array constructor, which will be index the array based on the length , but in the second scenario, you just use an array of length 5

You will know the difference when starting Object.keys(initialArray) with Object.keys(normalArray)

Try checking the example below.

 function helloMap(value, index) { return "Hello " + index; } console.clear(); var initialArray = Array.apply(null, new Array(5)); console.log("Array initialised with apply:"); console.log(initialArray); console.log(initialArray.map(helloMap)); var normalArray = new Array(5); console.log("Array constructed normally"); console.log(normalArray); console.log(normalArray.map(helloMap)); //DIFFERENCE console.log("Initial Array: "+Object.keys(initialArray)); console.log("Normal Array: "+Object.keys(normalArray)); 

 .as-console-wrapper { max-height: 100% !important; }