What’s the Ternary Operator in Javascript and How to Use it
Tags: javascript, webdev, beginners, codenewbie
Published: 2020-10-31 13:18:31

This short tutorial will help you learn how the ternary operator works in JavaScript and how to use it.

When you are creating conditions in your JavaScript code, most of the time, you're using traditional conditions (`if`, `else`, and `else if`).
But, do you already heard about the ternary operator?

These operators work like traditional, but they are designed for small conditions. Using them allows you to have a more concise code.

**I released a video version of this blog post.**

The video is a short version of this blog post. If you want to learn more about JavaScript concepts, you can join [my Youtube channel](https://www.youtube.com/gaelgthomas?sub_confirmation=1).

{% youtube IajIIPt06xY %}

## Ternary Operator Syntax

They appear in your code with the character `?` and `:`.

The best way to understand how ternary operator work is to compare it with a `if` condition:

```javascript
// Traditional condition:
if (something) {
  console.log("Yes");
} else {
  console.log("No");
}

// Ternary condition:

something ? console.log("Yes") : console.log("No");
// [condition] ? [if] : [else]
```

## Use-cases

Below, you can find examples to work with the ternary operator.
These examples will simplify your code and help you understand when you should use it.

## If/Else conditions

This example is the most recommend use-case. If you have a short condition and if you want to keep your code concise, you can use the ternary operator.

```javascript
const name = "Julien";

// This:
const color = name === "Julien" ? "blue" : "green";
// if the variable `name` is equals to "Julien" the colour is "blue" otherwise it's "green"

console.log(color);
// Output: "blue"
```

> **Note:** The main idea of the ternary operator is to build a one-line condition.

## Complex conditions

The ternary operator allows you to create complex conditions with condition inner condition. In this article, I want to share what you can do with this operator with you, but I do not recommend using it in this case.

```javascript
const age = 20;

// This:
age <= 25
  ? age <= 10
    ? console.log("less or equal to 10")
    : console.log("less or equal to 25 but more than 10")
  : console.log("too old");
// Output: "less or equal to 25 but more than 10"

// Is the same than:
if (age < 25) {
  if (age < 10) console.log("less or equal to 10");
  else console.log("less or equal to 25 but more than 10");
} else {
  console.log("too old");
}
// Output: "less or equal to 25 but more than 10"
```

> **Note:** As you can see, it's hard to read. Suppose your condition is more than one operation and more than one `if`, `else` you should avoid using the ternary operator. Otherwise, your code can become unreadable and hard to maintain.

## Multiple operations

You can also do multiple operations while using a ternary condition.

```javascript
let letter = "a";

// This:
letter === "a"
  ? (console.log("letter is a"), console.log("this is cool"))
  : console.log("letter is not a");
// Output:
// "letter is a"
// "this is cool"

// Is the same than:
if (letter === "a") {
  console.log("letter is a");
  console.log("this is cool");
} else {
  console.log("letter is not a");
}
// Output:
// "letter is a"
// "this is cool"
```

> **Note:** Like the previous example, it's not recommended because it can be hard to read and understand.

### Conclusion

Thank you for reading this article on the ternary operator in JavaScript!

---

If you want more content like this, you can [follow me on Twitter](https://twitter.com/gaelgthomas/), where I tweet about web development, self-improvement, and my journey as a fullstack developer!