DEV Community

Discussion on: Here's Why Mapping a Constructed Array in JavaScript Doesn't Work

Collapse
 
jbristow profile image
Jon Bristow • Edited

Why not just [...Array(5).keys()];?

For history’s sake, it’s equivalent to:

Array.apply(null, Array(5)).map(function(_, i) {
  return i;
});
Collapse
 
thorstenhirsch profile image
Thorsten Hirsch • Edited

Shawn's point was not to find a solution that does not use a for loop. Shawn's point was to demonstrate why the code that one would expect to work does not:

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

It looks simple, but does not work in Javascript, due to this array-is-an-object thingy. That's the point.

I'm not sure if I would go with Shawn's spread operator solution or if I'd just go back to a simple for loop. But I'm pretty sure that Array.apply(null, ...) and Elarcis' Array.from(...) are not solutions that are easy to understand (no offence), they both seem to be workarounds.

Collapse
 
loilo profile image
Florian Reuschel • Edited

To be honest, with regard to the article, I find it quite weird that Array(5).keys() does work. 🤔

Thread Thread
 
jbristow profile image
Jon Bristow

It doesn’t!

The ... fires first and produces Array.apply(null, Array(5)).keys()

Then that is expanded to Array(undefined, undefined, undefined, undefined, undefined).keys().

Since the Array was created by a list of items, keys returns [0,1,2,3,4]

JavaScript needs a range operator or a Texas range notation. Just so I don’t need to hide the splat under a function to increase readability.

Thread Thread
 
loilo profile image
Florian Reuschel

Makes sense, thanks. I struggle with splat operator execution order from time to time.

Thread Thread
 
jbristow profile image
Jon Bristow

In trying to rewrite the above code I ended up having to experiment a bit to figure out what was happening when... it’s certainly far from obvious.

Collapse
 
sreisner profile image
Shawn Reisner

This also works!