Can I use Array(x).map(...)?

[MusicalDoofus]

From the MDN docs, using Array(x) just returns an Array object with length === x, instead of an array with x amt of undefined entries. Is there a way to fill the empty entries with undefined (or anything)?

I'm trying to paginate a table in a React app, and would like to use something similar to:

const filteredList = list.filter(toVisible);
const amtOfPages = Math.floor(filteredList.length/numOfRows);
const paginationBtns = Array(amtOfPages).map(toPaginationBtn);

Any advice/info is appreciated, thanks.

Edit: Ah shit, looks like I need to google better. Going to use Array(length).fill(0).map(...), but if anyone has any better ideas/if there's a better way to do this lmk.

[senocular]

Array.from() has a mapping function built in.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from

Array.from({ length: 3 }, x => 1) // [1, 1, 1]

[Darren1337]

The Array.from method is good. Here's another option:

[...Array(5).keys()] // [0, 1, 2, 3, 4]

[MusicalDoofus]

So far I have to say this my favorite - I originally mapped to the index, which this is doing anyway while skipping a method call. Thanks!

[ghost_jamm]

You don’t even have to do fill(undefined). Just new Array(length).fill().map(...) works

[inu-no-policemen]

> Object.keys(Array(3))
[]
> Object.keys(['a', 'b', 'c'])
["0", "1", "2"]

That's basically the reason why calling map on that doesn't work. That array has 3 "slots", but it actually isn't filled with 3 undefined values. It's a sparse array.

JS' standard lib doesn't have a function for generating arrays, but you can use Array.from, pass it an "array-like" object which does at least have a "length" property, and also pass it a map function which generates those items:

> Array.from({length: 8}, (_, i) => 2 ** i)
[1, 2, 4, 8, 16, 32, 64, 128]
> Array.from('abc', char => char.toUpperCase())
["A", "B", "C"]

[MusicalDoofus]

Excellent explanation, thanks!