I tried this
> Array(3)
[ <3 empty items> ]
> // and this joins up all the nothings
> Array(3).join('-')
'--'
> // but...
> Array(3).map((x) => 'a')
[ <3 empty items> ]
> // map doesn't work with the array of empty items!
and I thought I would get the same result as this
> [undefined, undefined, undefined].map((x) => 'a')
[ 'a', 'a', 'a' ]
What's up with that?
in the first case you creates an array with undefined pointers.
Array(3)
And the second creates an array with pointers to 3 undefined objects, in this case the pointers them self are NOT undefined, only the objects they point to.
[undefined, undefined, undefined]
when we compare the two case it's look like this
//first case look like this
[undefined, undefined, undefined]
//the second look like this
Array(3) [,,,];
map calls a provided callback function once for each element in an array, in order, and constructs a new array from the results. callback is invoked only for indexes of the array which have assigned values; it is not invoked for indexes which have been deleted or which have never been assigned values. In the first case array values have not explicitly assigned values, whereas in the seconds example were assigned, even if it was the value undefined link
for you example you have to do this
Array(3).fill(undefined).map(x => 'a')
.fill(undefined) is the same as .fill() since no argument is the same as undefined.you can use :
Array(3).fill(null).map(x => 'a')
.fill('a') could be used instead of .fill(null).map(x => 'a')
.fill(null) could be any value, even nothing as that is the same as undefined in each element..fill() with no arguments works too because it fills the array with undefined, making it dense. But the key point of my answer was to explain why .map() doesn't work on sparse arrays, and show how .fill(...) (with any value) solves that problem. I used null just for clarity — it's explicit and helps highlight that we're intentionally filling the array before mapping.Many array methods skip empty/uninitialized values ("sparse arrays"). Note that empty/uninitialized is a different state than an array entry containing a value undefined or null.
Array(5) // [empty × 5]
Array(5).fill(undefined) // [undefined, undefined, undefined, undefined, undefined]
Array(5).fill(null) // [null, null, null, null, null]
As other answers point out, you can use fill() to initialize all indices of your array if you want to run an array method like map() across all array indices.
Array methods have different behaviors when encountering empty slots in sparse arrays. In general, older methods (e.g.,
forEach) treat empty slots differently from indices that containundefined.
Methods that have special treatment for empty slots include the following:
concat(),copyWithin(),every(),filter(),flat(),flatMap(),forEach(),indexOf(),lastIndexOf(),map(),reduce(),reduceRight(),reverse(),slice(),some(),sort(), andsplice(). Iteration methods such asforEachdon't visit empty slots at all. Other methods, such asconcat,copyWithin, etc., preserve empty slots when doing the copying, so in the end the array is still sparse.
reduce page...The example illustrates how reduce treats undefined array values differently from empty/uninitialized values. i.e. the undefined value is not skipped and results in NaN whereas the empty/uninitialized value is skipped.
console.log([1, 2, , 4].reduce((a, b) => a + b)); // 7
console.log([1, 2, undefined, 4].reduce((a, b) => a + b)); // NaN
.map()method (and others like it) skip uninitialized array positions.Array(3).fill(null).map(x => 'a')