Logical Operators ! (NOT), && (AND), || (OR)

If you are learning to code or new to coding, you will be using logical operators, these are typically used with Boolean (logical) values. But you need to pay close attention to it, since && and || operators will return the value of the specified operand, so if the operand is using a non-Booleans value, the return will be a non-Boolean value.

Logical operators are used with any primitive value or object. Its result will be based in whether the value is truthy or falsy:

First, let’s identify that there are three logical operators in JavaScript: ! (NOT), && (AND), ||(OR) -represented with two vertical line symbols.

! (Logical NOT)

Using the ! operator in front of a value will convert it to a Boolean and return an opposite value. It means that a truthy value will return false, and a falsy will return true. Logical || (OR) is meant to manipulate boolean values only. This method is known as negation:

Example:

!true; // negating true returns false
<<false

!0; // 0 is a false value, so negating it returns true
<<true

Using double negation (!!) can help you to find if a value is truthy or falsy, specially when you are not an experienced coder and you need to verify, then you can first test out using this method and see if the value is truthy or falsy.

Example:

!! ‘ ’; // empty string value is false
<< false

!!“hello”;
<< true

!!3;
<< true

!!NaN;
<<False

!!“false”;
<< true

!!‘0’;  // Remember that a number 0 (zero) is false
<< true

Now, let’s define the operators && and || which represents the logical AND and OR logical operators.

Visual example:

// Logical AND operator
true  && true;  // true
true  && false; // false
false && true;  // false
false && false; // false

// Logical OR operator
true  || true;  // true
true  || false; // true
false || true;  // true
false || false; // false

&& (AND) Logical Operator

The logical operator is used with two or more values (operands), and only evaluates to true if all the operands are truthy. The value returned will be the last truthy value if they are all true, but it will return the first falsy value if at least one value is false.

Example:

const x = 7;
const y = 4;

(x < 10 && y > 1); // true 
(x < 10 && y < 1); // false

|| (OR) Logical Operator

The logical operator || (OR) also is used with two or more values, but it evaluates to true if any of the operands (values) are true, so only evaluates to false if both operands are falsy.

Example

const x = 7;
const y = 4;

(x == 5 || y == 5); // false 
(x == 7 || y == 0); // true
(x == 0 || y == 4); // true
(x == 7 || y == 4); // true

Conclusion

In JavaScript, && and || will not always return a Boolean value, but operators always will return the value of one of their operand expressions. And, using double negation !! your truthy and falsy values can be converted to Booleans.