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
Top comments (2)
That
isAdult
code can be written like this even w/o ternary operatorVery good point, ternary operator great if you need a specified else other than booleans