What’s the Ternary Operator in Javascript and How to Use it

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.

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:

// 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.

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.

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.

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, where I tweet about web development, self-improvement, and my journey as a fullstack developer!

Comments

[Jon Randy 🎖️]

It's actually called the conditional operator. It's sometimes referred to as the ternary operator as JS (and lots of the other languages) only have one ternary operator. A ternary operator is an operator that has 3 operands - just as a unary operator has 1 operand, and a binary operator has 2

[Pierre]

Great article !

Do you know if there is any performance gain using this or is it the same as if/else ?

Thanks !

[Gaël Thomas]

Thank you, Pierre!

I didn't test by myself, but after reading a few posts talking of that, there isn't much of a difference in performance one way or the other.

The main difference is the way to write a condition and readability.

[Alain Van Hout]

I have no idea about execution performance, but I know that excessive use of the ternary operator can very efficiently give you a headache 😆.

[Gaël Thomas]

Hahaha, you got it! 😆

[Jon Randy 🎖️]

Not at all sure why you mention being able to do 'multiple operations' - using a comma in this way can be done anywhere and does not relate to the ternary operator at all

[Gaël Thomas]

Hello Jon,

Yes, for sure, you can do it anywhere!
In this article, I'm sharing how to use it with a ternary operation, what you can do with it.

I wanted to show, mainly for newcomers in JavaScript, that you can do multiple operations using this method.

condition ? console.log("Yes") : console.log("No")

I can imagine some people are trying like below, for example, but it's not working.

condition ? console.log("Yes"); console.log("Yes2")  : console.log("No")

It was more like additional information.
I hope it answered your question! 😊