Write Minified Code with The Ternary Operator

There will be 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 :)

There are various operators in a programming language such as

1. Arithmetic operators (+, -, *, /, %, ++, — ).
2. Comparison operators (==, ===, !=, !==, >, >=, <, <=).
3. Logical operators (&&, ||, !).
4. Assignment operators (=, +=, -=, *=, /=, %=).
5. Conditional/Ternary operator ( (condition) ? value/result1:value/result2).

And we use most of them frequently except the last one which is a Ternary Operator. That’s because it is underestimated a little bit. So let us get it’s value back in this article.

Ternary Operator

Let us begin with the syntax first. And below is the syntax of a ternary operator.

(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 operator can be used for/in

• Condition checking.
• Multiple condition checking.
• Variable assignment (This is what it is mainly used for).
• Functions.

Condition checking

Ternary operator can sometimes eliminate the usage of an if-else statement.

// 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 also looks clean.

Multiple condition checking

We can also nest a ternary operation inside another 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

Do note that if there are multiple expressions within an if-else statement, it’s better not to use a ternary operator to make the code more readable.

Variable assignment

This is what a ternary operator is destined to do by default according to its syntax.

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

Ternary operator can also be used in functions but note that it's appropriate only in case of less complicated expressions like the one below.

// 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() { 
    return age ? 'Authorized' : '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 using the if-else statement.

Points to remember

• The ternary operator is a combination of operator & conditional.
• It is a replica of the if-else conditional, so its functions are a little bit similar to an if-else statement. But it cannot be a complete replacement for an if-else statement.
• The only difference is the number of lines of code a ternary operator requires.
• 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.

And this one is important! Do not use a ternary operator for complicated expressions or logic. Instead, use a simple if-else statement as it will be easier to read and maintain.

So use the ternary operator appropriately according to your requirement.

And I also want to thank the people who highlighted some of the mistakes that I made and thus helped me in repolishing this article through their comments. Do read the comments below. There some great explanations from other people too!

That’s it. See you folks in another article, bye!

Originally published at stackbyte.wordpress.com on January 31, 2019.