February 27th, 2022
42
A ternary operator is a way to write if/else statements in one line, however if you've never heard of them before, they can be tricky to understand.
They consist of 3 fundamental components. 1. A condition followed by a question mark (?) 2. An expression to execute if the condition is truthy 3. An expression to execute if the condition is falsy.
A ternary operator is written like this: isTrue ? true : false
. We have our condition isTrue
. It's the variable we are checking. It represents if (isTrue)
in a traditional if statement.
The true
after the question mark represents tha expression we will execute if the variable we are checking returns a truthy value.
The false
is the expression we will execute if the variable is falsy. It took me a while to figure out how to actually write ternary operators because I didn't understand them, so I stuck with if statements until I forced myself to learn them. Since then, I use them quite often, however ternary operators shouldn't always be used, in my opinion. I use ternary operators when I need a quick check if something is true or false. Use whatever gets the job done, but also provides decent readability.
Ternary operators work more like if/else statements.
If I were to write...
isTrue ? true
It would be like writing...
if (isTrue) {}
The difference is our ternary operator (the first code block) will fail whereas our if statement will succeed.It needs an expression to execute for a truthy or falsy result. With that said, ternary operators are more like if/else statements.They really work liike...
if (isTrue) { truthy()} else { falsy()}
In order to wrap this up with a pretty bow, I'll include a full example of how a ternary operator can be used.
const favouriteColour = "blue"
const isBlue = favouriteColour === "blue" ? "it's true! it's blue!" : "it's not blue :("
console.log(isBlue) // "it's true! It's blue!"//
Let's change our fav colourconst favouriteColour = "red"
const isBlue = favouriteColour === "blue" ? "it's true! it's blue!" : "it's not blue :("
console.log(isBlue) // "it's not blue :("
Ternary operators are amazing to use. If you're having a tough time understanding it, just keep practicing and working at it. As with anything that is unknown, through consistent practice, you'll understand it before you know it.
Just remember favouriteColour === "blue" ?
is our condition, ? truthy :
is our code to execute if it's truthy, and : falsy;
is our code to execute if it's not.
You might enjoy one of these suggestions