Make Your Javascript Code Cleaner - Ternary Operator

Welcome to a new series called Make Your Javascript Code Cleaner , In this series we will cover advanced topics that beginners may not know, but can have a big impact on your programming ability and impress your peers in code reviews.

Ternary Operator

So what is the ternary operator? Well that's the question that I had until this operator got pointed out to me in a recent code review. Since then i've doug deeper into the topic and decided to share my findings here.

Basic syntax

condition ? expression_1 : expression_2;

So lets run through this. The condition is going to be what your comparing e.g. 1 > 0 ? or 1 >= 0 ? . You can carry out any comparrison like this or more commonly you will be comparing a variable like age > 18 ?.

Then you want to make sure you follow your condition with a question mark ?. Your now free to outline your expressions. The first expression will be what you want to happen if the condition is true. This can be anything you like such as a string or boolean. Then add a : after the expression. You can then outline your second expression which will take place if your condition is false.

Let me outline this in a usable example:

const age = 18;
const isAdult = age >= 18 ? true : false;
// Will return true as age is set to 18

This is just a simple example but of course could be expanded for a variety of types in whatever circumstances you need.

Why Use?

More Readable/Cleaner Code

By using the ternary operator you can make you code more cleaner. By utilising the example above this is the tradition if/else alternative.

const age = 18;
let isAdult = "";

if(age >= 18){
   isAdult = true;
} 
else{
  isAdult = false;
}

This saves you at least 5/6 lines of code and makes it more readable. In a large codebase these lines will add up, and if you can cut these out wherever possible your peers will thank you.

Faster

Now there's not much evidence on this but I did come across an article by Kenneth Xu. He carrys out a speed comparison between how long a computer takes to process a ternary operator to an if else statement. He concluded that there is a very small difference between the two but the ternary operator was processed slightly quicker. If this is followed through a large codebase then there could be a noticible difference in speed which may have an impact on your program or system.

Advanced Usage

We can take ternary operators further than the examples above too.

const position = 2;
const finishingPosition = position == 1 ? "1st" : ( position == 2 ? "2nd" : "3rd Or Lower");
// Will return 2nd 

This is equivelent to

const position = 2;
const finishingPosition = "";

if(position == 1){
  finishingPosition = "1st";
} 
else if(position == 2){
    finishingPosition = "2nd";   
}
else{
    finishingPosition = "3rd Or Lower";
}

As you can see the ternary operator is stil a lot shorter but when you're starting to put else if's into the code you should really be starting to question wheather or not a ternary operator is best, as it is not as readable at this point and can go on to create a long single line statement.

Anyway I hope this article was useful to you and you've been as inspired by the ternary operator as I was when I first discovered how useful it can be in your Javascript development.

Cheers, Scott

Comments

[Gurkirat Singh]

That isAdult code can be written like this even w/o ternary operator

const age = 18;
const isAdult = age >= 18;
console.log(isAdult); // true

[Scott Andrews]

Very good point, ternary operator great if you need a specified else other than booleans