DEV Community

Cover image for Important JavaScript Shorthands to know ๐Ÿš€๐Ÿ”ฅ
Arjun Vijay Prakash
Arjun Vijay Prakash

Posted on • Edited on

Important JavaScript Shorthands to know ๐Ÿš€๐Ÿ”ฅ

#javascript #webdev #expert #programming

1) The Ternary Operator

Longhand- 

const x = 20;
let answer;
if (x > 10) {
    answer = "greater than 10";
} else {
    answer =  "less than 10";
}
Enter fullscreen mode Exit fullscreen mode

Shorthand 

const answer = x > 10 ? "greater than 10" : "less than 10";
Enter fullscreen mode Exit fullscreen mode

2) Declaring Variables Shorthand

Longhand- 

let x;
let y;
let z = 3;
Enter fullscreen mode Exit fullscreen mode

Shorthand 

let x, y, z=3;
Enter fullscreen mode Exit fullscreen mode

3) If True Presence Shorthand

Longhand- 

if (likeJavaScript === true)
Enter fullscreen mode Exit fullscreen mode

Shorthand 

if (likeJavaScript)
Enter fullscreen mode Exit fullscreen mode

4) If Not True Presence Shorthand

Longhand- 

if (!likeJavaScript === true)
Enter fullscreen mode Exit fullscreen mode

Shorthand 

if (!likeJavaScript)
Enter fullscreen mode Exit fullscreen mode

5) Arrow Function Shorthand

Longhand- 

function doAnything(){}
Enter fullscreen mode Exit fullscreen mode

Shorthand 

let doAnything = () => {}
Enter fullscreen mode Exit fullscreen mode

Top comments (9)

Collapse
 
andrewbaisden profile image
Andrew Baisden •

Cool snippets by the way it's better to put that code inside of Markdown Fenced Code Blocks with Syntax Highlighting. It would make them all far more readable.

markdownguide.org/extended-syntax/

Collapse
 
arjuncodess profile image
Arjun Vijay Prakash •

Thanks for the suggestion. Will be changing it ASAP.

Collapse
 
codingjlu profile image
codingjlu •

Nice. You can also mention destructuring.

Collapse
 
arjuncodess profile image
Arjun Vijay Prakash •

Thanks for the suggestion. I shall look into it in Imp JS Shorthands to know Part2!

Collapse
 
kilsonjs profile image
Kilson •

Hi Arjun I'm beginner can you explain to me something about programming? I have a simple doubt, Why you declared let answer?

Collapse
 
arjuncodess profile image
Arjun Vijay Prakash •

Hi Kilson, I didn't assigned the value to answer because you see, I changed its value afterwards. if I don't assign it and change the code as follows it will not run the same.
const x = 20;
if (x > 10) {
let answer = "greater than 10";
} else {
let answer = "less than 10";
}
As there will be one problem, we will not be able to access the answer variable because it's scope is inside the if-else statement and the error will be thrown as "answer is not defined"
See this - dev-to-uploads.s3.amazonaws.com/up...
We can correct the program as- dev-to-uploads.s3.amazonaws.com/up...

--Conclusion--
I used let answer; to shorten my code and to provide the audience with better and cleaner code.
Thanks! I hope you got the answer

Collapse
 
kilsonjs profile image
Kilson •

I tried this way and it worked too

const x = 30;
if (x > 10) {
console.log("greater than 10");
} else {
console.log("less than 10");
}

Thread Thread
 
arjuncodess profile image
Arjun Vijay Prakash •

Yeah. But I assigned the value to the variable that's why I mentioned that ways. Although that is also correct. Thanks for connecting with me. It was a great pleasure.

Thread Thread
 
kilsonjs profile image
Kilson •

Alright

Read next

varzoeaa profile image

Laravel Nova vs Filament: The Best Admin Panels

varzoeaa -

paharihacker profile image

The Art of Lazy Loading: Speeding Up JavaScript Applications

Rajesh Dhiman -

skipperhoa profile image

Sending Emails with Mailer in PHP + Symfony

Hรฒa Nguyแป…n Coder -

farouk_ profile image

Task manger app

Farouk -