The Conditional (Ternary) Operator
Tags: javascript, webdev, codenewbie
Published: 2021-01-30 16:17:11

In this article I'm gonna be talking about "<i> conditional (ternary) operator</i>"!
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. 
______________

<br> 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 :

``` javaScript 
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.

<b> Example </b>

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


``` javaScript 
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" 
```
_____________

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

<br>
Let's take a look at its code :

``` javaScript 
 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. 

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


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

```  javaScript 
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:
```  javaScript 
let correctAnswer = "pink"; 
``` 
we choose "pink" as our correct answer. 

* 2:
``` javaScript 
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:
``` javaScript 
"correct" : "wrong"; 
```
We've asked our code to show "correct" If the statement is true. 
And if the statement is not true, show "wrong".
 
__________
<br> 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?

<h4> Example 1. </h4>

Let's create a very simple budget app :


``` javaScript 
 let money = 500;
// Our budget is 500
```

<br> <b>If statement :<b> 

``` javaScript 
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 
```


<br> <b>Ternary operator : </b>

``` javaScript 
 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 
``` <br>

<h4> Example 2. </h4>
We want to see if a person is allowed to get their driver's license : 


``` javaScript 
let age = 10;
``` 

<br> <b> If statement : </b>
``` javaScript 
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. 
```

<br> <b> Ternary operator : </b>
``` javaScript 

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 .
<b>Just keep practicing </b>