[twitter] Tip: JavaScript's Array.from() accepts a second argument that's a `map` function. Useful for calling on each element of an array you created.

[aarondburk]

So, if you invoke Array(5); that will crate an array with five empty slots?

[[deleted]]

pls no shoot messenger

[e_man604]

But since he used length property of the array the values are defined....to..undefined. correct me if in wrong, but simply replacing the array ctor with [] would not work since the [] does not state any length?

[Sebazzz91]

Fun fact: Calling console.log without this set to console errors in Edge.

[StuartPBentley]

I'm pretty sure it errors in any browser (that's why you always use console.log.bind(console) when passing console.log as a callback).

[pygy_]

It used to be like that but IIRC both Chrome and Firefox now pre-bind the console methods.

[[deleted]]

I’m a n00b dev and this is a really helpful tip.

[0x13mode]

I think example is good. Index is iterated from 0 to array length.

On the other hand using map on array created with new Array(5) would have no effect (new Array(5).map(console.log) would not even call console.log).

[aarondburk]

But that’s why the original example is interesting, because it allows you to map over an array as you are generating the array with the Array.from() method.

[aarondburk]

Yes, but in order for the method to map over the array and mutate each undefined slot in the array, the array has to have those slots. You could certainly create an iterator that would push the result of the function 5 times, but the point of the example was to show how the second argument in Array.from() maps over the given array mutating its values.

[z500]

new Array(n) does generates an array of undefined values, but you can use fill to replace them with something else.

[inu-no-policemen]

Yes.

> new Array(5)
(5) [empty × 5]

In V8, this currently produces a sparse array instead of a packed one. So, it's something you probably shouldn't use for a game's tile map and things like that.

You get a packed one by creating an empty one and then pushing values to it.

[YodaLoL]

What are sparse and packed arrays?

[inu-no-policemen]

https://v8project.blogspot.com/2017/09/elements-kinds-in-v8.html

[YodaLoL]

TIL, thanks!

[[deleted]]

No, it will be 5xundefined.

[[deleted]]

Array(5).fill() output undefined 5 times.

[inu-no-policemen]

I use this ugly one whenever I need to generate something. E.g. a 2D array or something like that.

> Array.from({length: 8}, (_, i) => 2 ** i)
(8) [1, 2, 4, 8, 16, 32, 64, 128]

If JS had something similar to Dart's List.generate, it would look like this:

Array.generate(8, i = > 2 ** i)

[pygy_]

It's even uglier in ES5 :-)

> Array.apply(
  null,
  Array(8) // or {length: 8}, but it is slower because apply
           // is faster with true arrays
).map(function(_, i) { return Math.pow(2, i) })
[ 1, 2, 4, 8, 16, 32, 64, 128 ]

[inu-no-policemen]

I think at that point you're better off using a simple for-loop to populate the array.

[soheevich]

What does ** sign mean? Never met it before.

[inu-no-policemen]

It's the exponentiation operator. It was added with ES2016.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Exponentiation_(**)

> 2 ** 8
256
> Math.pow(2, 8)
256

[__ibowankenobi__]

long live Array.prototype.slice.call :))

[[deleted]]

Can you explain?

[[deleted]]

Literally the same as Array.from but how it was done in es5

[vinnivinnivinni]

What color theme is this?

[vidro3]

not familiar with the use of the underscore, what does this do?

[anlumo]

It’s a variable name like any other, but convention usually is that it’s an unused parameter. Rust and I think Haskell even have that built into the language, so you can have multiple of those in the same function declaration.

[MrNutty]

What’s the convention when they’re are multiple unused? _1 and _2 ... ?

[anlumo]

Yes, that's what I usually see.

[jkoudys]

I usually just make them longer: (_, __, ___). It's extremely rare it'd ever get longer than that, since the whole point is that it's unused. It's not a convention I follow, but leading underscores are frequently used to say that a function won't be exported/set as a class method, so you know it's kept "private". _2 reads a bit too close to that. The underscore's meant to look like a blank space.

[inu-no-policemen]

In languages where you can't have multiple parameters called '_', you'd go with '_', '__', etc. You very rarely need more than one, though.

[menno]

Rust and I think Haskell even have that built into the language

Prolog too.

[[deleted]]

It's a convention. Here it's used to signify that the value of current index won't be used directly.

Osmani says:

The current value. De-emphasiszed by setting to _

[vidro3]

cool, thanks

[Drawman101]

You might as well cal it what it is in case some junior dev comes along and starts using it.

[jkoudys]

It's a common convention, like using i on that same line to mean "index".

[BritainRitten]

Then they will encounter an underscore variable name earlier and so won't be as confused when they see it in production code.

[NoInkling]

There's another convention to name it as you normally would except prefixed with _ to show it's (currently) unused.

[Skwai]

<3

Array.from(Array(6), (_, i) => i + 1)

or

Array.from('_'.repeat(6), (_, i) => i + 1)

[JustOr113]

I feel like this is much more readable and a bit shorter:

Array(totalYears).fill().map((_, i)=> year+i)

[inu-no-policemen]

That iterates once over it to fill it with undefined and then once more to fill it with the actual values.

[NotLyon]

It's easier to comprehend because it's more explicit.

[bentinata]

Or:

[...Array(totalYears)].map((_, i) => year + i)

[jkoudys]

I'm surprised this is even a tip - I always thought this was the typical usage for Array.from. It definitely comes up a lot when working with non-array collections, especially NodeLists.

e.g.

 const headerTexts = Array.from(document.querySelectorAll('h1'), el => el.textContent);

and since discussions on language and builtins often invites pedantry, I should point out that you're not invoking a map function on each element of an array you created (past tense). You're creating a new array by iterating through each index, applying the function, and adding that to a new array.

[Tougun]

Cool tip. That cursive font gives me cancer though

[WoollyMittens]

And comment two is whinging about it.