Purpose of Array.from()
Hello guys, from mdn docs, mdn, I understood what
Array.from does but when it takes an object as argument what does it do? Can someone explain pls.43 Replies
It takes an iterable and turns it into an array
yep but in our case, we are passing an object as argument, even an object is an iterable with key, value pair but with only 1 property, do we expect an array of size 1 ?
querySelectorAll for example returns something that isn't technically an array
Mdn says
array-like objects (objects with a length property and indexed elements).Though I've honestly never used that So I think if you ran that code, you'd get an array with four empty indexes
yeahh just tried it out, I got an array of size 4
the
length property behaves as the size of the array to be returned in this caseAnd if you ran it on an object that didn't have length, it'd probably throw an error
yepp ty !
It's used to convert other kinds of collections into arrays too. like Sets
and set is great if you need a collection that automatically gets rid of duplicates and where the order doesn't matter
yepp I see, thanks 1
It allows you to turn an iterable or array-like into an actual array. This is important because array-likes don’t have all of the array methods. So if you get, for example, a node list (from
document.query selectorAll() you can’t filter, map, or forEach.
Also, using the optional second argument—a mapping function—you can create a custom array. I’m on mobile and at work so I can’t give an example right now, sorry.np, the explanation was perfect, will figure out the rest
you can also use it with a string, to get all the characters in an array
yepp
something interesting: it converts a sparse array into an array with undefined values
oh can be useful, ty !
oh, yeah, in case you might be surprised about stuff like this
wtf this function does way too many things at once i'm not a fan
It only does one thing: convert a non-array to an array. It’s very good at it, and has to be considering everything that’s not an array that it needs to handle
it sure is good at spitting out arrays
but the amount of different behaviors all funneled through a single function isn't very nice
i get why they have to do it though
but the examples epic gave aren't different behaviors at all though
they're quirks of the language
a string, for example, has a length property, and you can access characters by index:
yup
as long as it looks like an array, it will be converted to an array
it's the equivalent of this:
(it's not the same, as it handles iterators too)
I think it's easier to understand if you explain it that if it's either an iterable, or an object with a
length property and indexable values, it'll convert to an array
a string works because everything in JS is an object, it has a length property, and you can access letters by indexyeah, you're right
i just wanted to show that it doesn't do as much as stefanh was saying
thast it isn't a super magical method that does a million trillion things
Just an note. Some nodelist are live collections. (Element.children for example)
So array from can also be used to convert them into static arrays.
Useful for when you're doing something while iterating on the collection that causes the node to be removed
Ok, now that I'm home I can write out an example.
Say you want an array of 10 random numbers between 1 and 6:
The second parameter is a mapping function. Whatever it returns is made the value for that specific index. And as epic pointed out, if you use the map function on an array it skips any empty/undefined values.
just skips empty values
empty is not the same as undefined
That's what I meant :p
yup, but it is important to be a pedantic butt, because both are very different
::nods sagely::
but i didn't knew it has a mapping function
No? That's the primary way I use it
i just use it to get an array from something that isn't an array
I mostly use it to make arrays
i think the last time i used it, it was to convert a set to an array
yep I see, thanks !
I use that a lot to initialize arrays when doing stuff on index based data
Though now I try to use iterators when I can instead
IIRC it's more perfomant to do Array.from then .map than it is to use the mapping function. But the last time I benchmarked that was at least 2 years ago and ot might have changed since then (and even at the time the diff wasn't huge)
Just ran it on both
jsperf.app and jsbench.me and Array.from({length: 10_000_000}, () => Math.floor(Math.random() * 6) + 1); outperformed Array.from({length: 10_000_000}).map( () => Math.floor(Math.random() * 6) + 1); by a small amount (~11% slower on jsperf.app and ~14% slower on jsbench.me).I just wanted to check for iterators... you might need to not run the "for push" test case to get any meaningfull visibility about all the other alternatives XD
https://jsbenchmark.com/#eyJjYXNlcyI6W3siaWQiOiJheVR0U1AtMjlqeGNKMkJXbXVYS2giLCJjb2RlIjoiQXJyYXkuZnJvbSh7bGVuZ3RoOiBEQVRBLmxlbmd0aH0pLm1hcCgoXywgaSkgPT4gaSk7IiwibmFtZSI6ImZyb20gKyBtYXAiLCJkZXBlbmRlbmNpZXMiOltdfSx7ImlkIjoiZTU1ZDBTeTYxT1JhLWQzSTQ5bFJaIiwiY29kZSI6IkFycmF5LmZyb20oe2xlbmd0aDogREFUQS5sZW5ndGh9LCBpID0-IGkpOyIsIm5hbWUiOiJmcm9tIHdpdGggbWFwIiwiZGVwZW5kZW5jaWVzIjpbXX0seyJpZCI6InpJMXpmM3dyU3VZQXZ0ZE1mOFk3bCIsImNvZGUiOiJmdW5jdGlvbiogaXRlcihsaW1pdCkge1xuICBmb3IobGV0IGkgPSAwOyBpIDwgbGltaXQ7IGkrKykge1xuICAgIHlpZWxkIGk7XG4gIH1cbn1cblxuaXRlcihEQVRBLmxlbmd0aCkubWFwKChfLCBpKSA9PiBpKS50b0FycmF5KCk7IiwibmFtZSI6Iml0ZXIgdG8gYXJyYXkiLCJkZXBlbmRlbmNpZXMiOltdfSx7ImlkIjoidFJDMzRqdV9UZGF1WmxGZk8wem9nIiwiY29kZSI6ImZ1bmN0aW9uKiBpdGVyKCkge1xuICBmb3IobGV0IGkgPSAwOzsgaSsrKSB7XG4gICAgeWllbGQgaTtcbiAgfVxufVxuaXRlcigpLnRha2UoREFUQS5sZW5ndGgpLm1hcCgoXywgaSkgPT4gaSkudG9BcnJheSgpOyIsImRlcGVuZGVuY2llcyI6W10sIm5hbWUiOiJpdGVyIHRha2UgdG8gYXJyYXkifSx7ImlkIjoiTUo0QjVOZjFBZkh6dkgzRmpWc0d5IiwiY29kZSI6ImNvbnN0IGFycmF5ID0gW107XG5mb3IobGV0IGkgPSAwOyBpIDwgREFUQS5saW1pdDsgaSsrKSB7XG4gIGFycmF5LnB1c2goaSk7XG59IiwiZGVwZW5kZW5jaWVzIjpbXSwibmFtZSI6ImZvciBwdXNoIn1dLCJjb25maWciOnsibmFtZSI6IkJhc2ljIGV4YW1wbGUiLCJwYXJhbGxlbCI6dHJ1ZSwiZ2xvYmFsVGVzdENvbmZpZyI6eyJkZXBlbmRlbmNpZXMiOltdfSwiZGF0YUNvZGUiOiJyZXR1cm4ge1xuICBsZW5ndGg6IDEwMDAsXG59In19
JS Benchmark
A straightforward online JavaScript benchmarking tool and REPL with support for ES modules and libraries.
iterators are not great perfwise are they...
Oof
with a push in a for loop, for reference :
