Javascript Conditional and Logical Operators
By: Harriet Bicknell
Tags: JavaScript, Coding, Javascript Tips

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 .

returns . The only falsy values in JS are , , , , and . 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

evaluates to a truthy value, 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 true without evaluating the second expression which can be a disadvantage at times.