The Conditional (Ternary) Operator

In this article I'm gonna be talking about " conditional (ternary) operator"!
It's the shortcut to if statements, which I'll be explaining in a moment.
It's not complex and I'll try to make it as simple as possible for you.

First let's talk about if statements :

If statements help us execute code if a certain condition is met.

Now let's take a look at the codes :

if ( condition ) {
  statement if true;
} else {
  statement if false;
}

If the statement is true, the first code block will be executed and if it's false the second code block will be executed.

Example

We want to check if we should turn the lights on or turn it off

let isDay = true;

if (isDay === true) {
 console.log("Turn the lights off");
} 
else {
 console.log("Turn the lights on");
}
// it's day so the true code block will be executed and the result would be "turn the lights off" 

Now that we've talked about if statements let's see how we can shorten it.
We can do so with the help of "The conditional (ternary) operator".
What is this ? What a confusing name, right?
Worry not! It's very simple to grasp.

Let's take a look at its code :

 condition ? statement if true : statement if false;

When I was trying to learn more about this line of code, it was very confusing for me.

This is how I've made it easy for myself to understand for, which I'll explain it with an example :

We want to check if the chosen answer is correct or not :

let correctAnswer = "pink";

let result = (correctAnswer === "pink") ?
 "correct" : "wrong";

console.log(result); // the result will be correct "

The question mark might be confusing and hard to understand (it was for me) so how did I make it simpler for myself?
I'll break down the codes for you :

• 1:

let correctAnswer = "pink"; 

we choose "pink" as our correct answer.

• 2:

correctAnswer === "pink" ?

You can read "?" as "what is it?". I mean it's a question mark after all. It's supposed to be asking a question.
It's asking if the correct answer is pink?
Instead of reading it like " if the correct answer is pink", you can read it like " is the correct answer is pink?"

• 3:

"correct" : "wrong"; 

We've asked our code to show "correct" If the statement is true.
And if the statement is not true, show "wrong".

Now that We've talked about both if statement and conditional operator, I think a few more examples would help you understand this better , right?

Example 1.

Let's create a very simple budget app :

 let money = 500;
// Our budget is 500

If statement :

if (money === 500) {
 console.log("You're doing great in saving money")
} else {
 console.log("stop wasting your money and start saving");
} 
// the condition is true, therefore first code block will be executed 

Ternary operator :

 let result = (money === 500) ?
 "you're doing great in saving money" :
 "stop wasting your money and start saving";

console.log(result); // "you're doing great 

Example 2.

We want to see if a person is allowed to get their driver's license :

let age = 10;

If statement :

if (age >= 18) {
 console.log(
  "you can get your driver's license");
} else {
 console.log(
  "you're too young for this kiddo");
} 
console.log(result); // you're too young for this kiddo 

// person's age is not 18, therefore our condition is false and false code block will be executed. 

Ternary operator :

let result = (age >= 18) ?
 "you can get your driver's license" :
 "you're too young for this kiddo";

//is age greater than or equal to 18? No it is not. 

console.log(result); // you're too young for this kiddo 

That's it, guys.
I hope the examples were helpful and clear enough.
Don't worry if you can't get it at first, it took me awhile to figure it out.
But with more practice you can have a full grasp of this topic .
Just keep practicing