Conditional Operator

Conditional Operators are used to combine more than one comparision operator to make complex conditional statement. There are three Conditional Operator -

• && - And Operator.
• || - Or Operator.
• ! - Not Operator.

These operators works only on Boolean values. If you use other data types then they are automatically converted to Boolean type before they evaluate.

And Operator

If one of the operand is false, then this operator returns false. Otherwise it returns true.

true && true                // true
true && false               // false
false && true               // false
false && false              // false

Or Operator

If one of the operand is true, then the operator reurns true. Otherwise it returns false.

true || true                    // true
true || false                   // true
false || true                   // true
false || false                  // false

Not Operator

This is an Unary Operator as it takes only one operand. It returns the opposite of the operand. It means if the operand if true, then it returns false. If the operand if false, then it returns true.

!true         // false
!false        // true

Precedence

The Not Operator has the higher precedence. And then the And Operator and lastly Or Operator. For example -

	true && false || !false

Here, !false is evaluated first which becomes true. After that true && false is evaluated which results to false. So it finally becomes to false || true, which results to true.

For a simple structure like this, it is predictable to tell what will be the final result. But if your structure gets even more complex and looses the readibility it is better to wrap them up with parenthesis. That will make the code more readable and will be easier to debug. For example -

	true && ((false || !false) && (true || !false))           // true

However parenthesis is useful to customize the condition the way we want to evaluate to controll better.

Short Circuit Evaluation

The way the && and || operator works is called Short Circuit Evaluation. It is a simple logic. For && operator, if the first operator is false, then the && operator returns false without checking if the second argument is true or false. Because for && operator, if the first argument is false, the result will always be false and doesn't depends on the value of the second operand. So there is no need for checking the second operand and then comparing the two value.

The same logic works for || operator too. If the first operand is true, then it returns true without checking the second operand. Because for || operator, if the first operand if true, the result will always be true.

Real Life Examples

All of the above examples are demonstraded using boolean value true and false. But in real life programming, we never do that drama. In real life we use conditional operator along with comparision operator to build complex condition. For example -

if(  (age > 30 && gender == "Male")  ||  (age > 40 && gender == "Female")  || userHasAccess == true  )
{
	console.log("Welcome");
}
else
{
	console.log("Get Out");
}

In the above example, the message "Welcome" gets printed for those who are Male and aged above 30 or Female who are aged above 40 or members who already has access (userHasAccess == true). Otherwise it prints the message "Get Out". Things like this we do almost all the time in real life programming.

You can also you function. In that case the returned value will be used with other operands. You can also bind functions with expression to create more complex structure. The evaluated value of the expression will be used with other operand.

if(getAgeOfLoggedInMember() > 30 && getGenderOfLoggedInMember() == "Male"){
	console.log("Hey Buddy, Welcome to the Party !");
}

or,

if( (getBookPrice() + getTravelCost() + getTax()) > 500 ){
	console.log("Overpriced !");
}

Here in the first example, the value that is returned from the function getAgeOfLoggedInMember() gets compared with 30 to check if it is greater than 30. Similarly, getGenderOfLoggedInMember() function returns the value and that value is compared with the string "Male". This way the whole condition gets evaluated.

In the second example, each value that is returned from each function gets sums up, and then the sum is gets comapred with the value 500.

This way both operand can contain complex structure and they gets evaluated first before they are being used with operators.