Array.from(Array(3)).fill(__filename)

dmsheiko

Hi,

What is the difference between these two approaches:

const files = Array.from(Array(3)).fill(__filename)

and

const files = Array(3).fill(__filename)

?

Why is the first approach preferable? (Or could be preferable in some circumstances.)

Thanks,
Dmytro

xdxmxc

@dmsheiko hmm its kind of historical reasons, Array.from({ length: n }) is actually what Array.from uses (length) to create a non-sparse array (array of n elements with value undefined in each. Array(3) (which is new Array(3)) creates a sparse array of 3 elements - an array with length of 3 but no actual element slots in use, 3 empty slots, no values at all (although if referenced it will be undefined but it doesn't contain the value undefined)

You can call fill on a sparse array, but you can't map, filter etc (sparse elements are skipped).
In terms of language evolution, fill came later than Array.from which came later than map which came later than Array(3) so it's an evolved pattern to go from Array.from({length: n}).map(...) or Array.from(Array(3)).map(...) (which is a shorthand for the former) to Array.from(Array(3)).fill().

It's generally not a good to use the Array constructor directly, except in performance scenarios where you actually want actually a sparse fixed-length array. Array(3).fill is better, but in terms of code-practices Array(3) anywhere is generally not ideal - there are exceptions but the exception of using it for Array.from(Array(3)) vs Array.from({length: 3}) probably isn't worth it. So to conclude

• Array.from({length: n}).fill() // general
• Array(n).fill() // proven perf requirement cases
• Array.from(Array(n)) - probably best not to do, updating the text accordingly

dmsheiko

Thank you very much for detailed explanation!

xdxmxc

np!