DEV Community

Tim Apple for Vets Who Code

Posted on

 

JavaScript Ternary Operator

In my learning of 'Control Flow' in JavaScript I ran into the Ternary Operator (or Condtional Operator). I find these to be just to cool not to write a little about them.

The Ternary Operator is a real short way to choose between two things instead of using if/else. They a basically structured as:

condition ? if true : if false; The ? is your operator.
So lets do an example.

if (cheese === 'Yellow') {
 console.log("Got me some yellow cheese!");
 } else {
 console.log("Got me some moldy cheese!");
 } 
Enter fullscreen mode Exit fullscreen mode

So doing the above if/else the "Ternary way" would look more like this.

cheese === "Yellow" ? console.log("Got me some yellow cheese!") : console.log("Got me some moldy cheese!");

  • So we have our condition - cheese === "Yellow"
  • Our True - console.log("Got me some yellow cheese!")
  • And our False = console.log("Got me some moldy cheese!")

I don't know why I love this so much. Well I do, it just makes things a bit simpler in my eyes. So give them a go if you haven't before. They are pretty fun.

Cheers!

Top comments (3)

Collapse
 
travisvalenti profile image
Travis Valenti • Edited

There's nothing more beautiful than a well executed ternary expression.

It becomes especially useful when working with templates where you want a simple inline way of switching between behaviors or components.

If you'd like some more things to look into, thing about what happens when you use logical operators (&&, ||) to determine what parts of code run (also super useful when templating, but also for providing defaults like const x = someParameter || 'defaultString').

Collapse
 
l2aelba profile image
l2aelba • Edited

I would do something like this…

let message = condition ? 'result' : 'default'
console.log(message)

Why? : Think about if you not just console.log or do async functions

Collapse
 
heytimapple profile image
Tim Apple

That's very cool, I'm still learning my way around myself so i'm pretty positive I haven't come close to wrapping my mind around all the possibilities.

Visualizing Promises and Async/Await 🀯

async await

Learn the ins and outs of Promises and Async/Await!