The Ternary Operator
Tags: javascript, webdev, beginners, tutorial
Published: 2021-10-05 15:05:37

*This article is part of the first installment of a series I'm calling __JavaScript You Must Know__. The aim of this series is to go over various fundamentals of the JavaScript language that a developer must know/understand before moving forward with any of the modern JavaScript frameworks like React, Angular, and Vue. Learning these fundamentals in parallel with the frameworks would also be acceptable.*

*This first installment of the series focuses on syntax-related topics and is called __JavaScript You Must Know -- Essential Syntax__.*

---

The ternary operator is simply a shorthand for an `if...else` statement. It is used very liberally by JavaScript developers (and developers of other languages that have this operator). These days it is especially common to see the ternary operator being used in React code.

## Syntax
The ternary operator is the only operator in JavaScript that takes three operands. Its syntax may take some getting used to but it is actually quite straightforward. Let's take a look. Please note that the parentheses and the angle brackets are not part of the syntax; I'm just using them for readability.

`(condition) ? <expression A> : <expression B>`
* *condition*: an expression that evaluates to a truthy or a falsey value
* *expression A*: this expression is evaluated/executed if the *condition* is true
* *expression B*: this expression is evaluated/executed if the *condition* is false

The equivalent `if...else` statement for the example above would be:
```js
if (condition) {
  <expression A>
} else {
  <expression B>
}
```

Let's consider a more realistic(-ish) example. Assume we need a function that takes the current temperature value as its argument and returns a string saying if it is hot outside or not. Using an `if...else` statement, one might code the function like this:

```js
function tellMeIfItsHotOutside(outsideTempInCelsius) {
  if (outsideTempInCelsius > 30) {
    return "It is kinda hot";
  } else {
    return "Na, not really hot";
  }
}

console.log(tellMeIfItsHotOutside(25)); // output: "Na, not really hot"
console.log(tellMeIfItsHotOutside(31)); // output: "It is kinda hot"
```

Now, if we use the ternary operator instead of the `if...else` statement inside the `tellMeIfItsHotOutside()` function, it would look like this:

```js
function tellMeIfItsHotOutside(outsideTempInCelsius) {
  return (outsideTempInCelsius > 30) ? "It is kinda hot" : "Not really hot";
}

console.log(tellMeIfItsHotOutside(25)); // output: "Na, not really hot"
console.log(tellMeIfItsHotOutside(31)); // output: "It is kinda hot"
```

Looking at the examples above, I'd say that both are equally readable but the ternary operator is much more concise.

## Nested Ternary Operator
The ternary operator can also be nested. For example, if you have an `if...else` statement like this:

```js
if (firstCondition) {
  <expression A>
} else if (secondCondition) {
  <expression B>
} else {
  <expression C>
}
```

You can replace it using the ternary operator:

```js
(firstCondition) ? <expression A> :
  ((secondCondition) ? <expression B> : <expression C>);
```

We've basically just replaced `<expression B>` with another conditional statement that uses the ternary operator. The same can be done with `<expression A>` as well. Remember, `<expression A>` and `<expression B>` (considering the first ternary example) can be any valid JavaScript expressions. This includes arithmetic and logical expressions, function calls, and more ternary expressions.

Let's apply all of this to our outside temperature example and say that our `tellMeIfItsHotOutside()` function is a tad more specific and follows the following logic:
* If the outside temperature is more than 40 degrees, return "Very hot; stay in"
* If the outside temperature is between 30 and 40 degrees, return "Yeah, it is hot"
* If the outside temperature is between 25 and 30 degrees, return "Kinda hot, but not too much"
* If the outside temperature is 25 degrees or less, return "It's actually really nice out"

First, let's do the `if...else` version.

```js
function tellMeIfItsHotOutside(outsideTempInCelsius) {
  if (outsideTempInCelsius > 40) {
    return "Very hot; stay in";
  } else if (outsideTempInCelsius > 30) {
    return "Yeah, it is hot";
  } else if (outsideTempInCelsius > 25) {
    return "Kinda hot, but not too much";
  } else {
    return "It's actually really nice out";
  }
}

console.log(tellMeIfItsHotOutside(41)); // output: Very hot, stay in
console.log(tellMeIfItsHotOutside(32)); // output: Yeah, it is hot
console.log(tellMeIfItsHotOutside(26)); // output: Kinda hot, but not too much
console.log(tellMeIfItsHotOutside(22)); // output: It's actually really nice out
```

Now let's see what the same function would look like if we had used the ternary operator.

```js
function tellMeIfItsHotOutside(outsideTempInCelsius) {
  return (
    (outsideTempInCelsius > 40) ? "Very hot; stay in" :
      (outsideTempInCelsius > 30) ? "Yeah, it is hot" :
        (outsideTempInCelsius > 25) ? "Kinda hot, but not too much" : "It's actually really nice out"
  );
}

console.log(tellMeIfItsHotOutside(41)); // output: Very hot, stay in
console.log(tellMeIfItsHotOutside(32)); // output: Yeah, it is hot
console.log(tellMeIfItsHotOutside(26)); // output: Kinda hot, but not too much
console.log(tellMeIfItsHotOutside(22)); // output: It's actually really nice out
```

If you're not already used to the syntax of the ternary operator then I'd highly recommend doing this example on your own so the syntax sinks in nicely. Note that I've used indents and line breaks to make the syntax more readable. In my opinion the ternary version is much more readable in this case. Some of you may find the `if...else` version more readable. The important thing is to have code-readability as a priority. Always take some time to think which version will be easier to read and follow. Because that is the version that will be easier to debug, refactor, expand, and all that jazz.

---

👉🏻 Subscribe to my newsletter: [click here](https://www.bracketsinstitute.com/newsletter-subscription)

👉🏻 Follow me on twitter: [click here](https://twitter.com/therealnrf)

---