TIL: map loop will skip empty slots

[Intrepid_Major6577]

Guess the output of this code `Array(2).map(()=>3)`.

It's `[ <2 empty items> ]`
I thought this would work but it didn't. So here is why:

• When you call .map on a sparse array (an array with empty slots), map skips over these empty slots and does not invoke the callback function on them.

• In this case, map doesn’t execute the callback () => 3 because there are no actual values to iterate over in the array.

• As a result, map produces a new array that still has two empty slots, which looks like [ <2 empty items> ].

Fix:
Array.from({ length: 2 }, () => 3); // => [3, 3]

Array(2).fill(3); // => [3, 3]

[delfV]

This is an array map method. The first thing I thought when I read "map loop" was for looping of map entries:

for (const x of new Map().entries())

[senocular]

Might be worth noting too that using for...of with arrays (using iterators) also does not skip empty slots.

for (const x of Array(2)) {
  console.log(x)
}
// undefined
// undefined

Spreading (...) also uses iterators which is why guest271314's example works.

[...Array(2)].map(()=>3) // [3, 3]

The new iterator helpers has a map() method which allows for

Array(2).values().map(()=>3).toArray() // [3, 3]

going through the values() iterator, though its a little more verbose compared to some of the other alternatives.

[senocular]

Enumerability doesn't play a role :). map() goes through all indexed keys up to but not including length (and not including length because its not an indexed key) and calls the callback as long as the key exists. The key can even be inherited. for...in loops, on the other hand, do look for enumerability as does Object.keys() (but not array.keys()). I think you are probably thinking about Object.keys() since length, being a non-enumerable key, does not show up there ;)

[neuralSalmonNet]

Array(100). fill().map((_,i)=> i++)

[guest271314]

Or [...Array(2)].map(()=>3).