Ternary ? Conditionals : JavaScript
Published: 2020-03-04 19:23:40

What is best practice when it comes to conditions? When using standard conditions, it takes a couple blocks of code to get an assignment finished. 

Let's take a look at what a standard conditional looks like. 

 ```js
const isAaronTired = true;
let energy;

if (isAaronTired) {
     energy = "5 Hour Energy";
} else {
     energy = "Willpower"
}

```

Do you see how many blocks that took? Yeah I know. 

We will take this step by step to make our code shorter and more concise. 

```js
const isAaronTired = true;
let energy;

//Ternary conditional start:
 
 `yourCondition`

//you are checking your condition first

```

```js
const isAaronTired = true;
let energy;

//Ternary conditional operator follows:

yourCondition `?`

//the question mark operator is there to separate the condition and the action 

```

```js
const isAaronTired = true;
let energy;

//Ternary conditional expression:

yourCondition ? `chooseThisForTrue : chooseThisForFalse`


//a colon separates the expressions. Left for true and right for false.

```

```js


const isAaronTired = true; 
let energy;

//Standard Conditional


if (isAaronTired) {
     energy = "5 Hour Energy";
} else {
     energy = "Willpower"
}


//standard conditional converted into a ternary conditional

yourCondition ? chooseThisForTrue : chooseThisForFalse

isAaronTired ? "5 Hour Energy" : "Willpower"

//because const isAaronTired is true we use the left expression of the ternary expression which is "5 Hour Energy"

```

If you want to store the variable then you just add it to the ternary conditional. 

```js
const isAaronTired = true;
let energy;

let energy = isAaronTired ? "5 Hour Energy" : "Willpower"

//energy is now set to "5 Hour Energy"
```

If you want to `concatenate` using a ternary conditional, make sure to wrap it with parentheses

```js
const isAaronTired = true;
let energy;

return "Aaron is using:" + (isAaronTired ? "5 Hour Energy" : "Willpower")

```

You can also compound ternary conditions.

```js
const isAaronTired = true;
const doesAaronHaveAProjectDue = false;


return "Aaron is using:" + (`isAaronTired && doesAaronHaveAProjectDue` ? "5 Hour Energy" : "Willpower")

//because one variable boolean is false, the condition is false. 
// it would return "Aaron is using: WillPower"

```

There can be multiple actions as well.

```js
const isAaronTired = true;
const doesAaronHaveAProjectDue = true;

let energy;
let decision;

isAaronTired && doesAaronHaveAProjectDue ? 
    (energy = "5 Hour Energy", decision = "power through")
     : 
    (energy = "Willpower", decision = "lie in bed")

return "Aaron needs a" + energy + "and" + "his decision is to" + decision

//it will return "Aaron needs a 5 Hour Energy and his decision is to power through"
```

Nesting a ternaries is also possible. 

```js
const isAaronTired = false; 
const doesAaronHaveAProjectDue = true;
const timeLeft = true;
let time;
let energy;
let decision;


isAaronTired && doesAaronHaveAProjectDue ? 
  (energy = "Willpower", decision = "lie in bed")
  : 
  timeLeft ? (time = "2 days" : time = "no time left")

return "Aaron has" + time + "to do his project"

//it will return "Aaron has 2 days to do his project"
```
There are so many ways to use ternary conditionals. Implement them into your practice and your peers will thank you for it!