DEV Community

Javascript Tips for Beginners

Henry Boisdequin on November 22, 2020

This is a list of 7 useful Javascript tips intended to improve your productivity and overall experience when using Javascript. These tips are for b...
Collapse
 
_garybell profile image
Gary Bell • Edited

To make this even better, we can make if, else statements even shorter using the ternary operator.

Can you explain what makes a ternary operator better than an if-else statement?

And nesting them so the else is, itself, an ternary operator is making JavaScript be like the formula bar for Excel - unreadable. If I got a code review where someone had nested ternary operators, I'd fail it on readability and maintainability grounds. If it can't be easily followed by someone new to the code base, it's pointless.

The rest of the article is pretty useful, and reminded me of a couple of things which I haven't used for a while so forgotten about.

Collapse
 
terpinmd profile image
terpinmd

By default most linting rules will fail that nested ternary. That is just a terrible pattern. I don't get this current trend with avoiding else stemtements.

Collapse
 
stefandrl profile image
Stefan Drl

I think that ternary operator is good, but! not the nested one (spaghetti code...).
I usually use it when I whant to assign a value to a variable based on a criteria.

Collapse
 
hb profile image
Henry Boisdequin

I agree with you. I just wanted to show that you could do an if, else if, and else with a ternary operator.

Thread Thread
 
_garybell profile image
Gary Bell

Thanks. It looked like you were encouraging people to do it.

I agree that ternary operators have their place, but nesting them in the real world (outside of excel or similar) is just madness

Collapse
 
aminnairi profile image
Amin

Hi Henry and thanks for your article full of interesting advices!

When it comes to printing to the console by a predicate, I like to use one console and use the ternary operator inside the method call.

const value = 10;

console.log(value !== 0 ? `Value is ${value}` : "No value");
Enter fullscreen mode Exit fullscreen mode

This shorten the code a little bit more, while still keeping the conditional rendering of those strings.

Collapse
 
hb profile image
Henry Boisdequin

Great point! This way definitely is more concise and readable.

Collapse
 
dansilcox profile image
Dan Silcox

Great tips for someone just getting started and mostly relevant to other languages not just JS!

One thing I would suggest not to use is the nested ternary operators as that really hurts readability - got to remember that as developers we should be optimising mostly for other humans to be able to read our code, not simply machines (or we would write 1s and 0s directly, right!)

Maybe another option would be to put the second ternary inside a temp variable on a separate line, e.g:
‘’’
const x = 10;
const notTen = x === 9 ?
“x is 9” :
“x is not 10”;
const logStmt = x === 10 ?
"x is 10" :
notTen;

console.log(logStmt);
‘’’
(Apologies for formatting, typing on mobile!)

Collapse
 
hb profile image
Henry Boisdequin

Great tips! I agree that the nested ternary operators are confusing but I just wanted to show that an if, else if, and else statement is possible with ternary operators. The way you did it is much cleaner.

Collapse
 
jwokiri profile image
Joe Oketch

This is excellent.

Collapse
 
hb profile image
Henry Boisdequin

Thanks!