Make Your Javascript Code Cleaner - Ternary Operator
Tags: javascript, codingstandards, webdev, beginners
Published: 2021-01-17 16:18:13

---
title: Make Your Javascript Code Cleaner - Ternary Operator
published: true
description: A quick look at the ternary operator and how it can improve your development standards.
tags: Javascript, codingstandards, webdev, beginners
series: Make Your Javascript Code Cleaner
---

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 

```javascript
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:

```javascript
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.

```javascript
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](http://kennethxu.blogspot.com/2013/10/ifelse-statement-vs-ternary-operator.html). 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. 

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

This is equivelent to 

```javascript
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