Ternary ? Conditionals : JavaScript

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.

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.

const isAaronTired = true;
let energy;

//Ternary conditional start:

 `yourCondition`

//you are checking your condition first

const isAaronTired = true;
let energy;

//Ternary conditional operator follows:

yourCondition `?`

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

const isAaronTired = true;
let energy;

//Ternary conditional expression:

yourCondition ? `chooseThisForTrue : chooseThisForFalse`


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



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.

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

const isAaronTired = true;
let energy;

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

You can also compound ternary conditions.

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.

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.

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!

Blog

Ternary ? Conditionals : JavaScript

akaaronkim

Join Our Newsletter. No Spam, Only the good stuff.

Related