Ternary operator in Javascript

MoreOnFew
Posted underJavascript

Some of the most useful “utilities” in any programming languages are the conditional statements. Conditional statements help a lot in making the piece of code dynamic and intelligent. In fact it would not be an exaggeration to say that without conditional statements none of the software and web applications would be existing today. Javascript too has conditional statements. In this article we will look into ternary operators, which is a conditional operator.

What is a ternary operator ?

As per the Oxford english Dictionary the term Ternary means “composed of three parts” . As the name suggests, Ternary operators are composed of three parts : Condition ? Expression 1 : Expression 2 . Hence we can say that :

Ternary operator is a conditional operator composed of three parts; the Condition, First Expression and Second Expression. If the condition evaluates to True, it returns the value of the First Expression else it returns the value of the Second Expression.

It is very similar to the If…Else statement. Let us understand it with the help of an example.

var age = 19; // Assuming that this value is input by the user
var EligibleForVoting = (age > 17) ? 'Yes you are eligible' : 'Sorry, not eligible';

//If the age of the user is greater than 17,
//the first string value would be returned else the second string.

//The same can be written this way using if..else statement.

var age = 19; //input by user
var EligibleForVoting;

if(age > 17){
    EligibleForVoting = "Yes you are eligible";
}else{
    EligibleForVoting = "Sorry, not eligible";
}

Nested Ternary operator

Like in case of an if…else statement, the ternary operators can also be nested. Let us look at the following if…else statement first

// Dummy condition to check marriage eligibility ;)
var age; //input by user
var MaritalStatus; //user input
var Eligibility;
if(age > 17)
{
    if(MaritalStatus == 'single')
     {
         Eligibility = true;
     }else{
         Eligibility = false;
     }
}else{
    Eligibility = false;    
}

In the above example you’ll notice that we have an if-else condition within the if block. The first if condition checks if the user is above  17 yrs, and if true , we further check if he/she is single. The variable Eligibility gets updated accordingly. Now lets write the same condition using ternary operator.

// Dummy condition to check marriage eligibility ;)
var age; //input by user
var MaritalStatus; //user input

var Eligibility = (age > 17) ? ((MaritalStatus == 'Single') ? true : false) : false;

As you must have noticed, using ternary operator makes the code shorter and manageable (if formatted properly). It is in fact much easier than if-else statement. It also helps in improving the file size by avoiding multiple lines. At the same time not every if-else statement should you replace with ternary operators. Do it wisely.

I would suggest using ternary operator wherever possible and in case you feel that the nesting is going to get complex then you may use if-else statement. Though you can actually break ternary condition and expression onto multiple lines to maintain readability.

Happy Coding ! 🙂

TaggedConditional StatementsIf-Else statementJavascriptTernary Operator


MoreOnFew.com – Read tutorials related to JavaScript, jQuery, HTML5, CSS3 and more !

Cover Image for How to check if checkbox is checked in jQuery?

How to check if checkbox is checked in jQuery?

It is very easy to check if a checkbox is checked in jQuery using the .is() or .prop() method of jQuery combined with the ‘:checked’ selector. There are other ways too like checking for the attribute checked value, however, they aren’t very reliable. The easiest and most stable way to check if checkbox is checked … Read more

MoreOnFew
Cover Image for [Solved] Attempted import error: ‘Switch’ is not exported from ‘react-router-dom’

[Solved] Attempted import error: ‘Switch’ is not exported from ‘react-router-dom’

You might be facing an “Attempted import error: ‘Switch’ is not exported from ‘react-router-dom’ ” error if you are using the react-router-dom package version 6. This error is caused due to using the older switch syntax of the react-router-dom. From version 6 onwards, the react-router-dom has replaced “Switch” with “Routes”. Let us take a look … Read more

MoreOnFew