Conditional operators play a crucial role in decision-making and controlling the flow of execution. And one of the most popular operator in Javascript is &&. Although seemingly convenient, it might cause some logical errors.
Let’s see the pitfalls of using the && operator and explore alternative approaches that can reduce potential issues.
const Component = (isOpen) => {
return (
<div>
// when isOpen is true show the modal
{isOpen && <div id="modal">This is a Modal</div>}
</div>
);
};
In the example, if the isOpen variable is true, the modal div will be displayed on the screen, and if it’s false, the modal div won’t be rendered. Everything is clear! As soon as isOpen is a boolean, null, undefined or string there is no problem.
const Component = () => {
return (
<div>
// BOOLEAN
// modal will be rendered
{true && <div id="modal">This is a Modal</div>}
// modal won't be rendered
{false && <div id="modal">This is a Modal</div>}
// NULL
// modal won't be rendered
{null && <div id="modal">This is a Modal</div>}
// UNDEFINED
// modal won't be rendered
{undefined && <div id="modal">This is a Modal</div>}
// STRING
// modal will be rendered
{"hello" && <div id="modal">This is a Modal</div>}
// modal won't be rendered
{"" && <div id="modal">This is a Modal</div>}
</div>
);
};
What if we use a number.
const Component = () => {
return (
<div>
// NUMBER
// modal will be rendered
{1 && <div id="modal">This is a Modal</div>}
// modal will be rendered
{0 && <div id="modal">This is a Modal</div>}
// modal will be rendered
{-0 && <div id="modal">This is a Modal</div>}
// modal will be rendered
{NaN && <div id="modal">This is a Modal</div>}
</div>
);
};
Let me give you an example. And you can see the problem in the example even on the most popular websites of the world’s largest companies.
//Let's display the rating on the screen
let rating: data.totalStars / data.starNumber
<div className="stars">
{Math.round(rating)}
</div>
Let’s assume the total given star of the product is 100 by total 30 people. And we want to show the average rating.
100/30 = 3.333333333333333
and
Math.round(3.33333) = 3
But when you add a new project, the initial value of the totalStars and starNumber will be 0.
0/0 = NaN
I’m sure you’ve seen something like the one below a thousand times!
Solution is Ternary Operator
The ternary operator offers versatility and flexibility that surpasses the capabilities of the ‘&&’ operator. Using a ternary operator you can handle all the falsy values.
const Component = () => {
return (
<div>
// modal won't be rendered
{0 ? <div id="modal">This is a Modal</div> : null}
// modal won't be rendered
{-0 ? <div id="modal">This is a Modal</div> : null}
// modal won't be rendered
{NaN ? <div id="modal">This is a Modal</div> : null}
</div>
);
};
Other Solutions
You can convert the value a boolean using Boolean() constructor or Double NOT (!!)
console.log(Boolean(NaN))
//false
console.log(!!NaN)
//false
console.log(Boolean(0))
//false
console.log(!!0)
//false
console.log(Boolean(-0))
//false
console.log(!!-0)
//false
