DEV Community 👩‍💻👨‍💻

Nic
Nic

Posted on

Ternary operators in JavaScript

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, 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:

const x = 5
if (x < 5) {
  div.innerHTML = 'less than 5'
} else {
  div.innerHTML = 'not less than 5'
}
Enter fullscreen mode Exit fullscreen mode

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:

const x = 5
x < 5 ? div.innerHTML = 'less than 5' : div.innerHTML = 'not less than 5'
Enter fullscreen mode Exit fullscreen mode

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:

const x = 5
div.innerHTML = x < 5 ? 'less than 5' : 'not less than 5'
Enter fullscreen mode Exit fullscreen mode

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:

const x = 5
function evaluateX() {
  if (x < 5) {
    return 'less than 5'
  } else {
    return 'not less than 5'
  }
}

div.innerHTML = evaluateX()
Enter fullscreen mode Exit fullscreen mode

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()
Enter fullscreen mode Exit fullscreen mode

Nested ternary operators

You can also turn something with else if into a ternary operator. Here is the original if, else if, else:

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'
}
Enter fullscreen mode Exit fullscreen mode

And the ternary operator for this:

const x = 5
div.innerHTML = x < 5 ? 'less than 5' : x > 5 ? 'greater than 5' : 'equal to 5'
Enter fullscreen mode Exit fullscreen mode

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:

const x = 5
const y = x < 5 ? x : 0
div.innerHTML = y
Enter fullscreen mode Exit fullscreen mode

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:

let y
x < 5 ? y = x; div.innerHTML = y : y = 0; div.innerHTML = y
Enter fullscreen mode Exit fullscreen mode

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

x < 5 ? y = x;
Enter fullscreen mode Exit fullscreen mode

You might say, why not take the semi-colon out so you have the below:

const x = 5
let y
x < 5 ? y = x div.innerHTML = y : y = 0 div.innerHTML = y
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)

🌚 Life is too short to browse without dark mode