Write better code with Ternary Operator

There is no introduction blah blah here because if you are reading this, then you should have already known some basics, so let us get started with the topic directly. We all know there are three types of operators in a programming language such as

1. Unary operator.
2. Binary operator.
3. Ternary operator.

Of the three, Unary and binary operators are the ones which we would use maximum.

var a = 10;
var b = 10;

a++; # unary operation

a = a + 1; binary operation

In the above code block, a++ (unary) is equivalent to a = a + 1 (binary). This unary operation reduced some of the repeated binary operations.

But with the ternary operator, some of the if-else blocks can be reduced to a single line of code. So let us talk about the ternary operator.

Ternary Operator

Ternary operator has the following syntax,

(condition) ? result1 if true : result2 if false

The condition is checked first and if its true, result1 is executed, else result2 is executed. This ternary operation can be used for

• Condition checking.
• Multiple condition checking.
• Variable assignment.
• Functions.

Condition checking

This is what a ternary operator does by default according to its syntax. It eliminates the usage of if-else statements.

// Without the ternary operator

var condition = true;

if (condition){
    console.log('True'); //True
} else {
    console.log('False');
}

//With the ternary operator

console.log(condition ? 'True' : 'False') //True

With the use of ternary operation, we have reduced the number of lines and it looks clean.

Multiple condition checking

We can also nest ternary operations inside a ternary operation.

var age = 25;
var pin = 0000;

(pin == 0000) ? ((age > 20) ? 'Authorized' : 'Not Authorized') : 'Access Denied';
// Authorized

In the above example, we have a nested condition age > 20 inside pin == 0000. And this code is equivalent to

var age = 25;
var pin = 0000;

if (pin == 0000){
    if (age > 20){
        'Authorized';
    } else {
        'Not Authorized';
    } 
} else {
    'Access Denied';
}

// Authorized

Variable assignment

var name;

var condition = true;

name = condition ? 'I have a name' : 'I don't have a name';

console.log(name) //I have a name

From the above code block, the variable name is assigned a value based on the condition using a ternary operation.

Functions

// Without the Ternary Operator

var age = 15;

function authorize() {
    if (age>20) {
        return 'Authorized';
    } else {
        return 'Not Authorized';
      }
}

console.log(authorize());  // Not Authorized

The above function returns a string based on the age. This code can be reduced with the use of a ternary operator like

// With the Ternary Operator

var age = 15;

function authorize() {
    age ? return 'Authorized' : return 'Not Authorized';
}

console.log(authorize()); // Not Authorized

As you can see, we have greatly reduced the number of lines of code by using a ternary operator instead of the if-else statement.

---

Points to remember

• Ternary operator belongs to both the operators & conditionals category.
• It is a replica of the if-else conditional, so its functions are similar to an if-else statement.
• The only difference is the number of lines of code.
• The expression that comes first after the condition is always treated as true and the next one is treated as false similar to an if-else statement.

See you folks in another article, bye!