Operator bersyarat berperan penting dalam pengambilan keputusan dan mengontrol alur eksekusi. Dan salah satu operator yang paling populer dalam Javascript adalah &&. Meskipun terlihat nyaman, operator ini dapat menyebabkan beberapa kesalahan logika.
Mari kita lihat jebakan dalam menggunakan operator && dan jelajahi pendekatan alternatif yang dapat mengurangi potensi masalah.
const Component = (isOpen) => {
return (
<div>
// when isOpen is true show the modal
{isOpen && <div id="modal">This is a Modal</div>}
</div>
);
};
Pada contoh, jika variabel isOpen bernilai true, modal div akan ditampilkan di layar, dan jika bernilai false, modal div tidak akan dirender. Semuanya sudah jelas! Selama isOpen adalah boolean, null, undefined, atau string, tidak ada masalah.
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>
);
};
Bagaimana jika kita menggunakan 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>
);
};
Saya akan memberikan sebuah contoh. Dan Anda dapat melihat masalah dalam contoh tersebut bahkan pada situs web paling populer dari perusahaan terbesar di dunia.
//Let's display the rating on the screen
let rating: data.totalStars / data.starNumber
<div className="stars">
{Math.round(rating)}
</div>
Anggap saja total bintang yang diberikan untuk produk adalah 100 dengan total 30 orang. Dan kami ingin menunjukkan peringkat rata-rata.
100/30 = 3.333333333333333
dan
Math.round(3.33333) = 3
Namun ketika Anda menambahkan project baru, nilai awal dari totalStars dan starNumber akan menjadi 0.
0/0 = NaN
Saya yakin Anda telah melihat sesuatu seperti di bawah ini ribuan kali!
Solusinya adalah Operator Ternary
Operator ternary menawarkan keserbagunaan dan fleksibilitas yang melampaui kemampuan operator ‘&&’. Dengan menggunakan operator ternary, Anda dapat menangani semua nilai falsy.
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>
);
};
Solusi Lainnya
Anda dapat mengonversi nilai boolean menggunakan konstruktor Boolean() atau 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
