Ternary operators in JavaScript
Tags: javascript
Published: 2021-12-12 12:30:08

Ternary operators are also known as conditional operators. Basically, they put an if else statement onto one line.

With these examples [I've put them in a codepen](https://codepen.io/nicm42/pen/bGoBwmR), to make them easy to test. Feel free to use it to have a play. In the HTML I just have a div element, and I'm outputting everything into that, just to make it easy to read.

## Simple example
Here's our if else condition:
```javascript
const x = 5
if (x < 5) {
  div.innerHTML = 'less than 5'
} else {
  div.innerHTML = 'not less than 5'
}
```
This is simple to understand: if x is less than 5 then we'll write the statement 'less than 5' and f it it's not less than 5 we'll write the statement 'not less than 5'.

Here's the same thing in a ternary operator:
```javascript
const x = 5
x < 5 ? div.innerHTML = 'less than 5' : div.innerHTML = 'not less than 5'
```
Here we have our initial condition, then we follow it with a question mark. The first item after that is what happens if the condition is true. Then after the colon is what happens if the condition is false.

But we can write this in an even simpler way:
```javascript
const x = 5
div.innerHTML = x < 5 ? 'less than 5' : 'not less than 5'
```
This time we start with what we want to do - update the div's innerHTML - then we evaluate the condition. Effectively we're saying to evaluate the bit on the right hand side of the equals sign, then whatever the final string is, put it in the div's innerHTML.

You could also do the same thing with a function:
```javascript
const x = 5
function evaluateX() {
  if (x < 5) {
    return 'less than 5'
  } else {
    return 'not less than 5'
  }
}

div.innerHTML = evaluateX()
```

Of course I could also have put a ternary operator in that function:
```
const x = 5
function evaluateX() {
  return (x < 5) ? 'less than 5' :  'not less than 5'
}

div.innerHTML = evaluateX()
```

## Nested ternary operators
You can also turn something with else if into a ternary operator. Here is the original if, else if, else:
```javascript
const x = 5
if (x < 5) {
  div.innerHTML = 'less than 5'
} else if (x > 5) {
  div.innerHTML = 'greater than 5'
} else {
  div.innerHTML = 'equal to 5'
}
```
And the ternary operator for this:
```javascript
const x = 5
div.innerHTML = x < 5 ? 'less than 5' : x > 5 ? 'greater than 5' : 'equal to 5'
```
So here we're saying we're going to put something into div's innerHTML. First we evaluate whether x is less than 5. If it is put 'less than 5'. If it isn't, then evaluate if it's greater than 5. If it is then put 'greater than 5'. If it isn't put 'equal to 5'.

Theoretically you can nest as many ternary operators as you want.

## Ternary operators without a string
You don't have to use strings in ternary operators. Here's an example without one:
```javascript
const x = 5
const y = x < 5 ? x : 0
div.innerHTML = y
```
We're setting the value of y to be based on the value of x. So if x is less than 5, then y should be equal to x. Otherwise, make y equal to 0. Then I'm just outputting it on the page to check it's worked.

## Ternary operators can only do one thing
Let's say we want to set the value of y and output a string, we can't do that in one ternary operator.

This won't work:
```javascript
let y
x < 5 ? y = x; div.innerHTML = y : y = 0; div.innerHTML = y
```
Codepen gives me an error here, telling me it can't find the : Not unreasonably because the semi-colon is the end of a line, so as far as it's concerned, all the line consists of is
```javascript
x < 5 ? y = x;
```
You might say, why not take the semi-colon out so you have the below:
```javascript
const x = 5
let y
x < 5 ? y = x div.innerHTML = y : y = 0 div.innerHTML = y
```
But that gives the same error because *x div.innerHTML* makes no sense.

Also, putting more than one thing in your ternary operator will make it harder to read, even if it did work. Which leads us onto...

## Should you use ternary operators?
As with everything, the question is, do you understand it? If you came back to the code in six months time, could you work out what it's saying? Generally speaking, if the answer is no, don't use it. I say generally because sometimes using it is the way to help understand it. If you use ternary operators every day, eventually they'll be perfectly obvious.

Often if you're doing one small thing, then a ternary operator can be easier to read than a longer if else condition.

Nested ternary operators are another thing. I've used them, just with three outcomes, as the example above, and still found them a bit hard to understand.