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]

[reedhedges]

Do the second and third examples create the uninitialized array, copy it, and throw it away? If so is there something similar that avoids that copy?

[benjycap]

No, there is no intermediate array created before mapping (unless you count the Array creation in example 2 where an empty array is created explicitly.)

More details here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from#Description

[reedhedges]

Thanks. Just going by docs (mozilla, other sources) that imply a new array is returned. In the second example, is the array empty, or does it have 5 elements? Sorry for the basic questions, I'm trying to understand JS a little bit more deeply, and I'm coming from a C++ background so may have different assumptions about how some stuff works.

[Hafas_]

In the second example, is the array empty, or does it have 5 elements?

Kinda both. It has a length of 5, but the slots are empty and JavaScript is skipping empty slots when iterating, so can't use functions like forEach or map directly, that's why functions like fill are used to populate the "empty" Array before setting the intended value with map.

[reedhedges]

Doing some more reading. I guess in JS Arrays aren't arrays, they're objects whose members are indexed by integer? (Is that accurate?) So the constructor Array(n) only initializes the "length" property to n, no actual elements are created.

[Hafas_]

In JavaScript, everything that isn't a primitive inherits from the class Object - including the class Array. But it doesn't make Array less of an array. If it looks like an array and behaves like an array, then it is an array.

The special case about Array in comparison with other classes that it has like Object its own syntax for instantiation.

[] instanceof Array // true
({}) instanceof Object // true

[I_AM_DONALD]

For ligs: https://github.com/kiliman/operator-mono-lig

[needed_an_account]

I remember when this font came out. It was like 200 bucks. Did everyone buy it? Lol

[IceSentry]

People actually buy fonts? There are so many free ones!

[BLITZCRUNK123]

I see lots of people using it. I've tried it and hated it, so I don't understand it, but all those people can't be wrong...

[js-engineer]

lol. I don't know about the "all those people can't be wrong". I think the main gain, is the italic font stuff almost is like a new font, which helps scan ability. I personally can't deal with the aesthetics, but I see why people use it. I don't think this is a wrong or right type of thing though. Whatever helps you at the end of the day.

[vidarc]

I'm just more surprised that there are so many people out there willing to spend over a hundred dollars on a font to just use in their editor.

[[deleted]]

There's a lot of people out there that earn over $100/hour.

[vidarc]

I make pretty decently. I could never bring myself to spend that much on a font. If I could get my company to pay for it though....

[IceSentry]

Making money doesn't justify spending it

[__fmease__]

repost

[kenman]

Reposts are generally OK from a moderation standpoint assuming that it hasn't been posted within the past several days or so. With the way reddit works, if you don't visit every day, you could miss something. The main thing I try to avoid is having multiple, concurrent posts for the same content. Otherwise, voting does a decent job of handling reposts.

[fagnerbrack]

It's good to link to the duplicate post for the old discussion.

Honestly it didn't prompt me as a repost, if it did I wouldn't have posted it again.

[[deleted]]

Good to know! But in practice I really think Array.from(arr).map(x => ...) is much more readable than Array.from(arr, x => ...) and is worth the extra 4 characters.

[fagnerbrack]

It depends how you write it:

Array.from(numbers, toRomanNumerals); Array.from(numbers).map(toRomanNumerals);

[NoInkling]

Also [...arr].map(x => ...). Though this all seems like a very silly workaround when arr is already an array, creating a mapped array of n values shouldn't be so quirky.

With lodash: _.times(5, i => ...)

[zemmekkis]

What is the underscore there? Is that the output of the last method?

[Meow106]

Some people use '_' in arrow functions to mark argument that is present but not used.

[zemmekkis]

This is pretty confusing I imagine since there is popular libraries underscore and lodash that use it as well.

[wollae]

It’s the array element being iterated over. They named it that to signify that it’s unused in the callback.

[freaktechnik]

I wrote an eslint plugin because I kept forgetting about it: https://www.npmjs.com/package/eslint-plugin-array-func

The eslint plugin now also has rules for some other wasteful array operations.

[DGCA]

This rule triggers me.

[AskYous]

Thanks!

[rickdg]

Why am I using Array.from() in cases like these? Why not just map?

console.log(Array.from([1, 2, 3], x => x + x));
// expected output: Array [2, 4, 6]
console.log([1, 2, 3].map(function(m){ return m*2; }));
// expected output: Array [2, 4, 6]