JavaScript Ternary Operator
is a shorthand way of writing an if-else statement
it was used to make simple conditions simpler and more readable
for more complex conditions it is recommended to use traditional if-else
syntax
the ?
is equal to if
and :
is equal to else
const age = 20
age >= 18 ? console.log('You are eligible to vote') : console.log('You are not eligible to vote')
// Output: You are eligible to vote
example without using else
you don't need to write variable = true
, use variable
if the variable is true, you can write it as variable ?
if you don't want to do anything if it is false, you can use null
const variable = true
variable ? console.log('good') : null
or for more simpler you can use &&
to check if it's true without else
const variable = true
variable && console.log('good') // Output: good
use ?
to check if variables have value
if the variables were null or undefined, the code after ?
will not be executed
it was used to prevent error
const arr = [1, 2, 3]
console.log(arr?.length); // Output: 3
example in React
if using React, you can render the element inside the ()
directly
import React from 'react'
function TernaryOperator() {
const age = 18
return (
<p>
{age >= 18 ? ('You are eligible to vote') : ('You are not eligible to vote')}
</p>
)
}
export default TernaryOperator
so it makes the code more readable because you can put the operator inside the HTML element and render it there