Javascript – How to use ?: / Conditional / Ternary Operator

This article will look into how to use ?: or conditional or ternary operator in javascript. Conditional (ternary) operators are generally used to clean the code and are frequently used as shortcuts for if statements.
One should use Conditional / Ternary operators with clean names for the readability and better understanding of the code.

Table of Contents:-

1. Syntax of conditional (ternary) operator in javascript
2. Javascript how to use ?: / conditional operator with example
3. Javascript how to use multiple ?: / conditional operator with example

Syntax of conditional (ternary) operator in javascript

Javascript’s conditional or ternary operator takes three operands.

The first operand is a condition followed by a question mark (?). The second is the expression to execute if the condition is true followed by a colon (:) and the third is an expression to run if the condition is false.

Syntax:-

condition ? expressionIfTrue : expressionIfFalse

Javascript how to use ?: / conditional operator with example

Example:-

Let’s say we want to write a function to test if a person’s blood group is A+. If so, print the message “Your Blood Group Is Matched” else print “Your Blood Group Is Not Matched”.

We will be using both IF-ELSE and CONDITIONAL operator to illustrate the difference.

Code using IF-ELSE Condition:-

 function isBloodGroupAPositive(_bloodGroup)
    {
     if(_bloodGroup === 'A+')
     {
        console.log("Your Blood Group Is Matched ") 
     }
     else{
        console.log("Your Blood Group Is Not Matched ") 
     }
    }

Usage:-

let bloodGroup1 = "A+"
isBloodGroupAPositive(bloodGroup1)
let bloodGroup2 = "A-"
isBloodGroupAPositive(bloodGroup2)

Output:-

Your Blood Group Is Matched 
Your Blood Group Is Not Matched 

Code using CONDITIONAL (?:) Operator:-

The below code is a function that takes one parameter-> _bloodGroup (string)

function isBloodGroupAPositive(_bloodGroup)
  {
   if(_bloodGroup === 'A+' ? console.log("Your Blood Group Is Matched ") : console.log("Your Blood Group Is Not Matched "));
  }

Usage:-

let bloodGroup1 = "A+"
isBloodGroupAPositive(bloodGroup1)
let bloodGroup2 = "A-"
isBloodGroupAPositive(bloodGroup2)

Output:-

Your Blood Group Is Matched 
Your Blood Group Is Not Matched 

Javascript how to use multiple ?: / conditional operator with example

Example :-

Let’s say we want to write a function to test if a person’s blood group is A+. If so, again check if the age group is greater than 25 years. If both conditions are true, print the message “Your Blood Group Is Matched And You Are Eligible”. If only the blood group is matched and age is not greater than 25, print the message “Your Blood Group Is Matched But You Are Not Eligible” else print “Your Blood Group Is Not Matched”.

The below code is a function that takes two parameters the _bloodGroup (string), _age (integer)

function isBloodGroupAPositive(_bloodGroup,_age)
    {
     if(_bloodGroup === 'A+' ? (_age > 25 ? console.log("Your Blood Group Is Matched And You Are Eligible") :
                                console.log("Your Blood Group Is Matched But You Are Not Eligible")) :
                                 console.log("Your Blood Group Is Not Matched "));
    }

Usage:-

let age1= 30
let bloodGroup1 = "A+"
isBloodGroupAPositive(bloodGroup1,age1)
let bloodGroup2 = "A+"
let age2= 20
isBloodGroupAPositive(bloodGroup2,age2)
let bloodGroup3 = "B+"
let age3= 40
isBloodGroupAPositive(bloodGroup3,age3)

Output:-

Your Blood Group Is Matched And You Are Eligible
Your Blood Group Is Matched But You Are Not Eligible
Your Blood Group Is Not Matched 

Read More:

• Remove comma from string in javascript
• Javascript remove line breaks from string (4 ways)
• Javascript: String remove special characters
• Javascript: Remove spaces from a string

We hope this article helped you to understand how to use conditional (ternary) operators in javascript. Good Luck !!!