Ternary Operator: Is It Just a Fading if/else?

[MyrinNew]

A ternary operator, also known as a conditional operator, is a shorthand for an if-else statement. It evaluates a condition and returns one of two values based on whether the condition is truthy or falsy.


Ternary's Syntax

As its name implies, the ternary is the only JavaScript operator that takes three operands. It has:

• A condition
• An expression that evaluates if truthy
• A second expression that evaluates if falsy. As you already know, these include values like false, null, NaN, 0, an empty string, and undefined.

Now take a look at the syntax:






condition? expressionIfTrue: expressionIfFalse;







The ternary operator can shorten an if statement into one line of code. For instance, suppose you want to check your user's age and limit access to certain features on your app, you could either use an if statement or a ternary operator.






// using an if statement
function isAdult(age){
if (age >= 18){
return "Adult";
}
return "Not an adult";
}

// using a ternary operator
function isAdult(age){
return age >= 18? "Adult" : "Not an adult";
}







The difference? A ternary takes fewer lines of code. However, as we will see later in this tutorial, overuse of the shorthand could easily trade off clarity for conciseness.


Notable Mentions

The ternary is right associative. This means that you can replicate anif…else if…else if…else chain. Here's how:






function myFunction(){
return condition? value1
: condition2? value2
: condition3? value3
: value4;
}








You can check for several conditions at a go by chaining them. Although when you are handling complex logic, it is important to weigh in on whether an if statement is a better tool.


Ternary's Use Cases

The ternary is useful in several instances. You can use them to: 

1. Assign a value to a variable conditionally. 
2. With arrow functions that have an implicit return. A ternary operator evaluates a condition and returns a result; hence, it's more of an expression rather than a statement. It is therefore perfect for implicit return.
3. Conditional rendering in frameworks like React. If you know React, then you have used the ternary operator several times. With the ternary, you can render or toggle different components based on a condition.

Best Practices To Keep in Mind

Overusing ternary operators can reduce code readability. For instance, in cases where you need to chain several conditions, you might be better off using an if statement instead.


Complex or deeply nested ternary expressions can easily trade off clarity, and you obviously want to write clean code that is human-readable.


Simplicity is often the best way forward when you have complex logic.


References

Conditional (ternary) operator - JavaScript | MDN





I hope this article has been of help to you. Thanks for reading. Keep building! 🌟







More...