DEV Community

Cover image for 5 JavaScript "tips" that might bite you back.

5 JavaScript "tips" that might bite you back.

Igor Snitkin on January 01, 2021

How many times have you seen articles saying "Do not do that", "This is wrong" or "These tips will make you a pro developer" etc. 😋 I don't know ab...
Read full post
Collapse
 
brandondamue profile image
Brandon Damue •

I like that part where you say "if you don't know why it works, then presume it doesn't". Great write up waiting for the follow up post.

Collapse
 
harshrathod50 profile image
Harsh Rathod •

Yeah, it is indeed a piece of great advice. Usually, I too, don't believe what is written until I'd myself seen or done practically.

Collapse
 
pris_stratton profile image
pris stratton •

Great read. Point 1 is also my favourite, “+” over “Number()” just makes no sense as a choice to me. The latter is ridiculously clear, the former is just ridiculous.

Collapse
 
thepeoplesbourgeois profile image
Josh •

I want union of any number of arrays, not just two. Any ideas how to refactor it still using the spread operator?

function union(a, ...b) {
  b.reduce((b, a) => [...a, ...b], a)
}
Enter fullscreen mode Exit fullscreen mode

Granted, the spread operator being used in the returned array like this means you'll be generating copies upon copies upon copies, but you asked for an arity-agnostic refactor, not a performant one 😜

Collapse
 
eecolor profile image
EECOLOR •

Note that your ordering is a bit weird. You could do this (swap b and a in the reduce):

function union(...arrays) {
  return arrays.reduce((result, x) => [...result, ...x], [])
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
thepeoplesbourgeois profile image
Josh •

Every single time I use reduce, I forget how whichever language I'm using it in organizes either its own arguments, or the arguments given to its lambda/block. 🤦‍♂️

Ruby:

init = 0
(1..10).reduce(init) do |accumulator, iteration| 
  accumulator + iteration  
end # 55
Enter fullscreen mode Exit fullscreen mode

Elixir:

init = 0
Enum.reduce(1..10, init, fn iteration, accumulator ->
  accumulator + iteration
end) # 55
Enter fullscreen mode Exit fullscreen mode

And now, (thank you,) Javascript:

function union(a, ...b) {
  return b.reduce((accumulator, iteration) => [...accumulator, ...iteration], a)
}
Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
eecolor profile image
EECOLOR •

Haha, yeah. In Scala you have foldLeft and foldRight, where foldLeft has it as the first argument and foldRight as the second argument.

Collapse
 
paulsmithkc profile image
Paul Smith •

This instantiates n+1 new arrays (where n is the number of arrays), when you could have just used a for loop to instantiate 1 new array.

Thread Thread
 
eecolor profile image
EECOLOR •

Did you read the comment of @josh to which I replied?

Granted, the spread operator being used in the returned array like this means you'll be generating copies upon copies upon copies, but you asked for an arity-agnostic refactor, not a performant one 😜

Collapse
 
chrdek profile image
chrdek •

Syntax bite # 5 for '12px 15px' can be also rewritten as:
margin.split(/px/g).map(Number) or margin.split('px').map(Number).
Produces a result of [12,15,0]. Still usable in case you only need to do basic calculations (add, subtract).

Collapse
 
paulsmithkc profile image
Paul Smith •

You're still assuming all of the values have a unit and that unit is pixels.

This doesn't work for zero.

Collapse
 
chrdek profile image
chrdek •

Great, thanks for pointing that out. Aside from that, it is an alternative for the specific example using integer casting.

Thread Thread
 
paulsmithkc profile image
Paul Smith •

You missed the whole point of this article. Which that you should not be writing code that way in the first place. Nor should you be suggesting this buggy code to anybody else.

Collapse
 
dvddpl profile image
Davide de Paolis •

Don't just blindly follow whatever is written online, question yourself, research, test, then double research and double test. "It just works" should never be an excuse! If you don't know why it works, then presume it doesn't.

absolutely love this and agree 100%
this would just require a post on its own.

it summarize the right positive investigative attitude to good coding practice and learning in general.

Collapse
 
mrwensveen profile image
Matthijs Wensveen •

A worthy article to read. Thanks!
My two cents:

  1. Why would you even create a 'sum' function when there is an operator that does just that? FP does not mean that you have to make functions for everything and your grandmother.
  2. Again, FP does not mean you have to make functions where expressions are readily available. The function actually hides that you're using spread, possibly surprising the callers of the function with unexpected results. They're better off using the appropriate method of concatenation where it is needed.
  3. Whoever says you can use bitwise operators to "round" is just plain lying. But it is an extremely fast way to cast your number to int (in other languages cast to int also truncates).
  4. I have to say I was surprised by this. Good tip!
  5. The main point to take away from this tip is that you don't have to use lambda's all over the place, which a lot of developers do, but that you can supply a function that takes the appropriate number of arguments. BTW, not every higher-order method takes 3 arguments, by definition. Just the ones on Array :)
Collapse
 
waynevanson profile image
Wayne Van Son •

My favourite part was "solution: use a function". How great is functional programming!

Great abstraction with the "bites", a great article to read :)

Collapse
 
lucassperez profile image
Lucas Perez •

What's not love about
variable + ''
1+ +a
!!thing
if (!value)

Collapse
 
khorne07 profile image
Khorne07 •

Find some tricks very helpfull, specially points 4 & 5 🖒. But in point one I prefer using + operator to make conversions to number, is faster to type and is you hardly manage big ints in your app so the unary + operator works perfect. Also I like to use !! to convert to boolean type. Just a matter of personal taste 😁. Very good article 🖒. I'll be waiting gor the 2nd part.

Collapse
 
alexleung profile image
Alex Leung •

Seems like using TypeScript solves most of these

Collapse
 
moopet profile image
Ben Sinclair •

Do people really do things like exploit bitwise operators as an alternative to rounding? In 2021? (I get to say that today!)

Collapse
 
mrwensveen profile image
Matthijs Wensveen •

Not as an alternative to rounding, which is just wrong. But it's an extremely easy and fast way to cast your value to int. If you're doing fast graphics stuff, bitwise operations can be really useful.

Collapse
 
moopet profile image
Ben Sinclair •

If you're in the sort of situation where that optimisation is important, then you're probably keenly aware of what you're doing. I'd never recommend this to anyone who wasn't already an expert.

Collapse
 
devdufutur profile image
Rudy Nappée •

Great post ! Really enjoyed fifth part. Especially to keep "truey" values I used to filter with identity :

arr.filter(item -> item)

But never liked it 😅

Collapse
 
phongduong profile image
Phong Duong •

I rarely use these tips because they are difficult to understand and remember. Thank you for sharing. Great post

Collapse
 
anderspersson profile image
Anders Persson •

Geat article, would like more of this.

Collapse
 
tshma profile image
Tomer •

Great Article. I even learned new tricks :-)
Bring on the next 5...

Collapse
 
aslasn profile image
Ande •

dang

Collapse
 
someshium profile image
someshium •

stuffed : )

Collapse
 
well1791 profile image
Well •

Man the round stuff was neat! thanks for sharing!

Collapse
 
stoutlabs profile image
Daniel Stout •

Great post! Cheers 💜

Collapse
 
cdurex profile image
Carlos •

Awesome read! Awesome tips!! Waiting for the second part! Keep up the good work! :D

Collapse
 
wrldwzrd89 profile image
Eric Ahnell •

Yep... JavaScript, fun as it is, is also full of these little things that can trip even the most experienced programmers up. Great read, thanks for sharing!