DEV Community

Cover image for Awesome 5 javascript Shorthands

Awesome 5 javascript Shorthands

iFTekhar on March 19, 2021

In this blog, I have shared 5 awesome shorthand tricks to make a developer's life faster! 1) Setting the variables values Normally you would defi...
Collapse
 
jonrandy profile image
Jon Randy πŸŽ–οΈ • Edited

Beware when using the double NOT - it isn't the same as Math.floor:

Math.floor(2.3) // 2
~~2.3 // 2

Math.floor(-2.3) // 3
~~-2.3 // 2
Enter fullscreen mode Exit fullscreen mode
Collapse
 
iftekhs profile image
iFTekhar

Thanks for pointing. agree.πŸ™‚

Collapse
 
khorne07 profile image
Khorne07 • Edited

I see people often complaining about that these kind of shorthands decrease code readability but wtf, I love write compact code like this and also love to read it like this. If someone complain about it is because he/she is not adapted to use the beneficts of write compact code using the new Ecma features. Maybe all the community need is more post like these showing how easy is to get those tips, so πŸ‘ good post πŸ™‚

Collapse
 
iftekhs profile image
iFTekhar

Thank you so much glad you liked it. enjoyπŸ”₯

Collapse
 
machtyn profile image
machtyn

If shorthand isn't understandable to the next dev that follows you, it probably ought not to be done. For example, #2 using -- as Math.floor. Besides, it fails in some cases, so it may cause future problems. #4 is iffy on the readability, but I do like it.

Collapse
 
iftekhs profile image
iFTekhar

That's why you should read the doc carefully before using anything that prevents breaking. Glad you liked it Thank you for reading.😊

Collapse
 
jenbutondevto profile image
Jen

ES2020 and 2021 have brought some more awesome "shortcuts", namely optional chaining which allows you to shorten

let temp = obj.first;
let nestedProp = ((temp === null || temp === undefined) ? undefined : temp.second);
Enter fullscreen mode Exit fullscreen mode

to

let nestedProp = obj.first?.second;
Enter fullscreen mode Exit fullscreen mode

another neat one from 2021 (currently available through babel plugin) is logical assignments, ||=, &&=, ??=.
in the case of &&= you can shorten

let a;
let b;
if(!!b) {
  a = b;
}
// shortens to
a &&= b
Enter fullscreen mode Exit fullscreen mode
Collapse
 
machtyn profile image
machtyn • Edited

Also, instead of let fruits of fruits it should be let fruit of fruits since in that for loop, you're working with just one of the fruits (or items) in the list at the time.

Collapse
 
iftekhs profile image
iFTekhar

Oh, Thank you so much I really missed that. Thank you for your point I'm changing it immediately.

Collapse
 
tbroyer profile image
Thomas Broyer

You seem to forget that code is an order of magnitude read more than it is written. Optimize for readability and leave those things for optimizing tools and bundlers.

Collapse
 
iftekhs profile image
iFTekhar

If you are developing alone and you know how these all work then in my case it is ok. But your right code must be Optimize for readability I agree.😊

Collapse
 
shitala099 profile image
shitala

It was great. Thanks

Collapse
 
iftekhs profile image
iFTekhar

Glad you liked it. enjoy.πŸ”₯

Collapse
 
jerouyer profile image
Jeff Rouyer

Excellent, and I appreciate the brevity. I would love more of these.

Collapse
 
iftekhs profile image
iFTekhar

Thank you so much glad you liked it! I will try my best to keep making these. enjoy.πŸ”₯