JavaScript Tutorial: Understanding Conditional Operators

What are Conditional Operators

Conditional operators are used in JavaScript to perform various actions based on a condition.
There are two conditional operators in JavaScript: if and “?”, the latter is also called the ternary operator and is used for conditional evaluation.

The “If… Else” Statements:

These statements make it possible for you to perform different actions based on different
decisions.

The “if” statement evaluates a condition and executes the code if the result is true.
The “else” statement will execute a code if the same condition is false.
The “else if” allows you to define a new condition to test if the first condition is false.
The “switch” statement allows you to specify several alternative blocks of code to be executed.

The “If” Statement

The “if” statement uses the following syntax:

if (condition) {
//block of code to be executed if the condition is true
}

Example:

let num = prompt('How many words are there in the work MEN');
if(num ==3) alert('You are right!');

You should note that you should always write 'if’ in lowercase letters. Using uppercase letters will generate an error in JavaScript.
The “if (…)” statement converts the expression in parenthesis and converts it to Boolean type. The Boolean conversion result can be either:
False: a number 0, an empty string, null, NaN, and undefined.
True: any other values
The code will only be executed if the condition is true. If false, it will need an “else”statement to continue.

The “else” Statement:

The “else” clause allows you to provide an option in case the “if” evaluation returns a false value.
For example:

let num =prompt('How many words are there in the work MEN'); 
if(num ==3) {
    alert('You are right!');
}
else{
    alert(“Try again!”);
}

The “else if” statement

You can use this clause to specify a new condition in case the first is false.
For example:

let year =prompt('In which year was ECMAScript-2015 specification published?'); 
if(year <2015){
    alert('Too early...');
}elseif(year >2015){
      alert('Too late');
}else{ 
    alert('Correct');
}

You can use multiple “else if” blocks. Also, the ending “else” is not mandatory.

The Ternary Operator (?)

The ternary operator is often used as a shortcut to the “if” statement. It allows you to assign a
variable that depends on a given condition. It is the only JavaScript operator with three operands. Hence, the name ternary!
The “?” operator uses the following syntax:

let result = condition ? value1 : value2;

The condition is the expression that will be evaluated to either true or false. Value1 and value2
are expressions with values of any type. Value1 is returned if the condition is true and value2 if the condition is false.

Example:

let accessAllowed = (age > 18) ? true : false;

Using Multiple “?” Operators

You can use multiple “?” operators to return a single value that depends on multiple conditions. You
can get the same result you would if you were using the “else if” statement.
Example:

let age =prompt('age?',18); 
let message =(age <3)? 'Hey!': (age <18)? 'Hello!' :(age <100) ? Good Evening!':'What an unusual age!'; 
alert( message );

While some programmers use the “?” operator by keeping the “if… else” syntax, it is not a recommended practice. While the notation is shorter, it is also more difficult to read.
The ternary operator is a very good replacement for an “if…else” statement if the return keyword is used multiple times and when it is the only expression inside of the “if” block. The ternary operator will replace a very lengthy series of “if… else” statements. It is a very light weight way of expressing
the same logic.