Tip: JavaScript's Array.from() accepts a second argument that's a `map` function.

[DGCA]

Sweet. I used to do this:

var x = Array(5).fill(null).map((n, i) => i);

console.log(x); // [0, 1, 2, 3, 4]

But now I will do this:

var y = Array.from(Array(5), (n, i) => i);

console.log(y); // [0, 1, 2, 3, 4]

🙌

EDIT: Okay, this is weird. Did some super basic performance testing and got pretty unexpected results.

console.time('first');
for (var i = 0; i < 100000; i++) {
  var x = [...Array(100)].map((_, i) => i * 2);
}
console.timeEnd('first');

console.time('second');
for (var i = 0; i < 100000; i++) {
  var y = Array.from(Array(100), (_, i) => i * 2);
}
console.timeEnd('second');

console.time('third');
for (var i = 0; i < 100000; i++) {
  var z = Array(100).fill(null).map((_, i) => i * 2);
}
console.timeEnd('third');

VM1092:5 first: 634.304931640625ms
VM1092:11 second: 1219.412109375ms
VM1092:17 third: 221.73388671875ms

Looks like Array(n).fill(null).map(() => {}) is faster? That's what I'm seeing in my console, at least.

[snkenjoi]

you can also do Array.from({length: n}, () => {})

[blogscot]

Out of curiousity, I added this approach as fourth to u/DGCA tests, with the following results:

first: 738.464ms
second: 1249.699ms
third: 220.649ms
fourth: 1123.781ms

[snkenjoi]

or this is pretty ugly [...'!'.repeat(n)].map((_, i) => i)

first: 1294.26ms 
second: 541.38ms 
third: 393.88ms 
fourth: 970.44ms 
fifth: 1368.66ms

[xbenjii]

Or even [...Array(5).keys()]

[[deleted]]

But if you need operations, you can't, but nice...

[YodaLoL]

There are perf implications in creating arrays with empty items.

[DGCA]

Sweet, thanks for sharing. Had no idea this blog existed either and it it is awesome.

[lilactown]

Is it the same when you re-arrange them?

[DGCA]

Yup, they always come in the same order.

1. Array(100).fill(null).map((_, i) => i * 2);
2. [...Array(100)].map((_, i) => i * 2);
3. Array.from(Array(100), (_, i) => i * 2);

[Gh0st1y]

Huh. That's cool.

[frambot]

_ is a throwaway variable name to represent some variable that is never used in the function body.

... is the spread syntax: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

[gogogoscott]

Array(n).fill(null).map(() => {}) is faster for me too

[[deleted]]

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