Javascript Conditional and Logical Operators

https://www.pexels.com/photo/persons-hand-doing-thumbs-up-4629633/

Some things to bear in mind before I get started:

• JavaScript is a loosely typed language which means logical operations can be performed on any type.
• Falsy is a value for which Boolean(value) returns false. The only falsy values in JS are false, 0, '', null, undefined and NaN.
• Truthy is a value for which Boolean(value) returns true. In JS, truthy values are essentially non-falsy values.

Ternary operator

JavaScript also contains a conditional operator commonly referred to as the “ternary operator”.

condition ? conditionIsTrue : conditionisFalse

• If the condition evaluates to a truthy value, conditionIsTrue will be executed
• If the condition evaluates to a falsy value, conditionIsFalse will be executed

I mostly use it to quickly write simple conditional statements, like these:

weather = {sunny: true, cloudy: true}
weather.sunny? 'Remember your sunglasses!' : 'No sun today :('
weather.sunny ? (weather.cloudy ? 'It is sunny and cloudy' : 'It is sunny and not a cloud in sight') : 'No sun today :(' 

Personally, I would recommend using if..else statements as opposed to using the ternary/conditional operator for nested ternaries because they are infinitely more readable.

weather.sunny ? (weather.cloudy ? 'It is sunny and cloudy' : 'It is sunny and not a cloud in sight') : 'No sun today :('
vs
if (weather.sunny){
  if(weather.cloudy){
    'It is sunny and cloudy'
  } else {
    'It is sunny and not a cloud in sight'
  }
} else {
  'No sun today :('
}

And this can be further simplified and made more readable using logical AND operator (&&).

Logical AND &&

The logical AND (&&) operator returns true if and only if all of its operands are true otherwise, it returns false. For example, expr1 && expr2 returns expr2 if expr1 is true; otherwise, it will return expr1.

expr1 && expr2
weather = {sunny: true, cloudy: true, rainy: false, windy: false}
weather.sunny  && weather.cloudy;  // true 
weather.sunny  && weather.rainy; // false 
weather.rainy && weather.sunny;  // false 
weather.rainy && weather.windy; // false

In the weather example, I was using above, you could write it like this:

weather = {sunny: true, cloudy: true}
if (weather.sunny && weather.cloudy) {
    'It is sunny and cloudy'
} else if (weather.sunny) {
    'It is sunny and not a cloud in sight'
} else {
  'No sun today :('
}
//'It is sunny and cloudy'

You can chain multiple && operands and it will continue to the following expression if the previous expression is true. Using && will return the first false or ‘falsy’ value and if every expression evaluates to true , the last evaluated expression will be returned.

Logical OR ||

The logical OR operator (||) returns true if either or both expression is true and returns false otherwise.

expr1 || expr2

This operator uses short-circuiting because it is evaluated left to right. This means that if the first expression is truthy, then it will immediately return truewithout evaluating the second expression which can be a disadvantage at times.

weather = {sunny: true, cloudy: true, rainy: false, windy: false}
weather.sunny  || weather.cloudy;  // true 
weather.sunny  || weather.rainy; // true 
weather.rainy || weather.sunny;  // true 
weather.rainy || weather.windy; // false
weather.sunny  || true;  // true 
true  || false; // true 
false || true;  // true 
false || false; // false