DEV Community

Cover image for Awesome 5 javascript Shorthands
iFTekhar
iFTekhar

Posted on • Edited on

Awesome 5 javascript Shorthands

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 define a variable then say x = value and if you have lots of variables (obviously) then it could take more time.

So you can simply define variables inside a set of square brackets then put the values on another set of square brackets like this.

Alt Text

2) Using Double Bitwise NOT operator instead of Math.floor()

Well you might have surely used Math.floor() to get rid of the decimal points but there is an easier way of doing the same operation using the Double Bitwise NOT operator it performs the same operation much faster.

Alt Text

3) For loop short hand

Instead of using a for-loop like the way we usually use you can just simply do this.

image

4) The logical AND operator

Suppose you want to call a function if one condition or statement is true or false. you would say if(something) then call function but instead of doing that there is a really better way of doing it which is to say something && callFunction() which means if the something is true then that function is going to be called.

Alt Text

5) Turning array into object

You might do a lot of things in order to just turn an array into an object. but the simplest way I think is to use the so-called spread operator or the ... operator

Alt Text

That was it! Thank you for reading my blog hope this makes your developing life fast and let me know if you like this little blog of mine. Thank you so much for reading this!πŸ™‚

Top comments (15)

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.πŸ”₯