Why do I need to copy an array to use a method on it?

Question

I can use Array() to have an array with a fixed number of undefined entries. For example

Array(2); // [empty × 2]  

But if I go and use the map method, say, on my new array, the entries are still undefined:

Array(2).map( () => "foo");  // [empty × 2]  

If I copy the array then map does work:

[...Array(2)].map( () => "foo");  // ["foo", "foo"] 

Why do I need a copy to use the array?

Answer 1

When you use Array(arrayLength) to create an array, you will have:

a new JavaScript array with its length property set to that number (Note: this implies an array of arrayLength empty slots, not slots with actual undefined values).

The array does not actually contain any values, not even undefined values - it simply has a length property.

When you spread an iterable object with a length property into an array, spread syntax accesses each index and sets the value at that index in the new array. For example:

const arr1 = [];  arr1.length = 4;  // arr1 does not actually have any index properties:  console.log('1' in arr1);    const arr2 = [...arr1];  console.log(arr2);  console.log('2' in arr2);

And .map only maps properties/values for which the property actually exists in the array you're mapping over.

Using the array constructor is confusing. I would suggest using Array.from instead, when creating arrays from scratch - you can pass it an object with a length property, as well as a mapping function:

const arr = Array.from(    { length: 2 },    () => 'foo'  );  console.log(arr);

Answer 2

The reason is that the array element is unassigned. See here the first paragraph of the description. ... callback is invoked only for indexes of the array which have assigned values, including undefined.

Consider:

var array1 = Array(2); array1[0] = undefined;  // pass a function to map const map1 = array1.map(x => x * 2);  console.log(array1); console.log(map1); 

Outputs:

Array [undefined, undefined] Array [NaN, undefined] 

When the array is printed each of its elements are interrogated. The first has been assigned undefined the other is defaulted to undefined.

The mapping operation calls the mapping operation for the first element because it has been defined (through assignment). It does not call the mapping operation for the second argument, and simply passes out undefined.