DEV Community

Cover image for What’s the Ternary Operator in Javascript and How to Use it
Gaël Thomas for HereWeCode

Posted on • Updated on • Originally published at herewecode.io

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

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

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

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

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!

Discussion (7)

Collapse
jonrandy profile image
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

Collapse
pierreatwork profile image
Pierre

Great article !

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

Thanks !

Collapse
gaelgthomas profile image
Gaël Thomas Author

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.

Collapse
alainvanhout profile image
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 😆.

Collapse
gaelgthomas profile image
Gaël Thomas Author

Hahaha, you got it! 😆

Collapse
jonrandy profile image
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

Collapse
gaelgthomas profile image
Gaël Thomas Author

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

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

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