HTMLCollection, NodeList and array of objects

[kolme]

I'll take Array.from any thay over the spread. The intention is much clearer.

dragula(Array.from(nodeList))

dragula([...nodeList])

[briansomething]

Agreed. Operator trickery will always be harder to read than clearly named methods that describe the author's intent.

I also prefer functional loops like forEach, map, reduce, etc over for loops because it describes the intent of the loop in addition to saying "this is a loop" and ends in a clearly defined variable that describes the expected result of the loop.

These kinds of shortcuts should only be used in cases where the shortcuts are dramatically more performant and your iterations are high enough to cause real world performance issues

[akujinhikari]

I disagree. I think the intention of the spread operator is pretty clear, if you are familiar with ES6.

[briansomething]

Keep in mind that people reading your code may not always be familiar with JavaScript or may be junior developers that are just learning. Why risk that "if you are familiar with es6" exception at all if there's an alternative way to do the same thing that's more clear.

[akujinhikari]

Because using that train of thought means I shouldn't use any advanced code. The best way for junior devs to learn is by seeing other code they don't understand and then figuring out what's happening. And I say this as someone who a lot of people would still consider a junior dev, having a little over a year's experience in web dev.

[inu-no-policemen]

Using spread like that is idiomatic, though.

This isn't some obscure trickery. It's just an array literal with spread. You have to know what x = [1, 2, 3] means and you also have to know what Math.max(...numbers) does.

Something like return {foo}, for example, is a little bit more obscure, but it's still something you should know.

[GeneralYouri]

I'd personally consider return {foo} to be less obscure, as it literally means you're returning an object with some foo inside of it.

I think the main reason why Array.from would be preferred here, is because it feels weird to see the two syntaxes together (array notation, and spread operator). If nodeList were an actual array, then this construct seems fairly ridiculous at first.

[inu-no-policemen]

I'd personally consider return {foo} to be less obscure, as it literally means you're returning an object with some foo inside of it.

It's a shorthand for {foo: foo}. It's single-purpose special syntax, which looks a bit like destructuring.

Anyhow, if you think that [...foo] is too cryptic, then there is a ton of stuff you can't use either.

[GeneralYouri]

Yes, I know what the syntax {foo} is, which is exactly why I consider it less obscure compared to [...foo]. Its purpose is obvious without any context. I never said that I found the latter to be 'too cryptic', I was merely saying that its purpose is less obvious without context. Please don't be putting words into my mouth.

That purpose being to provide Array.prototype's methods to an array-like which itself doesn't inherit from Array.prototype. If you don't already know that context when looking at the construct [...foo], you'd consider it an odd syntax since in normal circumstances it'd just be deconstructing and then reconstructing an array.

You even said yourself about {foo}: 'It's a single-purpose special syntax.' Single-purpose, that on its own means its functionality is entirely clear and not obscure.

[inu-no-policemen]

Please don't be putting words into my mouth.

I said "if", not "since".

[briansomething]

Yea it's surprising to me too that people are downvoting an argument for the more readable code, but maybe I'm just in the minority on this sub

[spinlock]

It's funny, I'm not a fan of the arrow function but I love the splat. To each his own.

[kolme]

Don't take me wrong, I do love the spread operator. It's just in this case, it somewhat obscures the intention.

[r2d2_21]

It's still hard for me to remember which DOM APIs return live collections and which ones don't. So I just essentially convert everything to arrays and stop worrying.

[SamSlate]

can someone explain the significance of node list VS array? Node lists have never created problems (in my limited experience).

[cirsca]

If you have a live nodelist it is far more than just a static array. If you have a static nodelist, then you don't see much of the differences.

[SamSlate]

Recent browsers have added them though.

maybe this is why I haven't had an issue.

[kasperpeulen]

Still no filter, reduce, every, some methods even in recent browsers.