JS Operators Part Three

4. Logical Operator

Logical operators are used to compare values. Any type of values can be compared using logical operator.

Three logical operators in Javascript are:

OR ||
AND &&
NOT !

Lets dive into it

1. OR ||

Represented with two pipe characters or two vertical lines and called as disjunction

||

The || operator represents

If any of the operand (argument) is true. It returns true, else it returns false

It means it returns false only if both arguments are false

If an operand or the operands are not boolean, then it is converted to the boolean for evaluation, and returns the original value of the operand, not the converted boolean. We know 1 represents true and 0 represents false. Here in Ex: 2, the numbers are converted to boolean in the operation, but not in the output.

Look at the example below. Ex : 3

What is happening ? Here its a combination of number and boolean

line 4 : no doubt, 0 is false. So it returns true
line 5 : 1 represents true, So it returns 1. no doubt
line 6 : both operands are true, but why does it return true, not 1 .? 🤔
line 7 : same like line 5, no doubt.
line 8 : Again, both operands are false, why does it return 0, not false.? 🤔
line 9 : no doubt.Small conflict in line 6 and line 8. right .? while comparing with boolean and number type. line 6 returns boolean value and line 8 returns number value. Why.?

Short-circuit evaluation

The evaluation stops once the operator finds the truthy value.

true || false || 0

It evaluates the second operand, only if the first operand is a falsy value, same rule applies to the third operand. In the above example, even before checking the second operator, it returns the true. Operator does not even know what is after the first operand.

Literally the operation stops where it finds a truthy value

OR seeks the first truthy value
It evaluates from left to the right
If the first operand is true, it stops there and returns the original value of that operand
If every operands in the expression are false, it returns the last operand

Recheck: 
line 6 : true || 1  // first operand is true. It returns trueline 8 : false || 0 // first operand is false. Checks the second operand. It is also false. Returns the last operand 0

As OR is seeking to find a true, it stops evaluation until it finds a true. If any value is true, it returns the first true value found. If all values are true, it returns the first true value. If all values are false it returns the last false value

Compare the line numbers to avoid confusion

0, null, undefined, empty string and false are false values. Positive integer, Negative integer, a string and true are true values

-1 is also a true value.

Short-circuit evaluation example

line 5 : operation stopped after finding true, So x not get assigned
line 6 : x is undefinedline 11 : operator found first operand is false, moves further. It understood need to assign 10 to the already declared variable y
line 12 : returns 10

Summary

syntax: ||
Returns true, if any one operand is true
Returns false, only if every operands are false
0, false, empty string, null, undefined are false
OR operator seeks first truthy value
Operation stops once a value is evaluated as true, and return the original value
If all values are evaluated as false, then it returns the last original value

2. AND &&

Represented with two ampersands and called as conjunction

&&

Returns true, only if both operands are true, else false

It means it returns false, if any argument is false

Four possible logical boolean combinations

Four possible logical number combinations

Only returns true, when all operands are true

&& operator also follows the short-circuit evaluation method

AND seeks the first falsy value
It evaluates from left to the right
If the first operand is false, it stops there and returns the original value of that operand
If every operands in the expression are true, it returns the original value of the last operand

As AND is seeking to find a false, it stops evaluation until it finds a false. If any value is false, it returns the first false value found. If all values are false, it returns the first false value. If all values are true it returns the last true value

line 4 : no false found, so returned the last original value, its 1
line 5 : no false found, so returned the last original value, its true line 6 : first operand is true, so moved further operand to check if its a falsy value, yes its a falsy value, so returned 0
line 7 : found first operand false, so no more evaluation required, returned 0Now you say, what is happening from line 11 to 14 .?Remember, AND seeks the first falsy value

Check the line numbers to avoid confusion

0, null, undefined, empty string and false are false values. Negative integer, positive integer, a string and true are true values.

Now, what is the difference between OR and AND .?

OR always returns true if any true exits, Only returns false if all arguments are false
AND always returns false if any false exits, Only returns true if all arguments are true

OR is a truth seeker like you, AND is a false seeker.

Summary

syntax: &&
Returns false, if any one operand is false
Returns true, only if every operands are true
0, false, empty string, null, undefined are false
AND operator seeks first falsy value
Operation stops once a value is evaluated as false, and returns the original value
If all values are evaluated as true, then it returns the last original value