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.
Top comments (7)
Great article! Don't forget that && and || use short-circuit evaluation, useful for use cases like feature flags and set default values:
Yes!
As a reminder, the logical operators work the following way with non-boolean values:
expr1 && expr2
: Ifexpr1
is truthy, returnsexpr2
; else, returnsexpr1
.expr1 || expr2
: Ifexpr1
is truthy, returnsexpr1
; else, returnsexpr2
.Hi André! Thank you for your comment. With just some lines you have provided a great input about default values.
Great post! Just a heads up that you can highlight code like so if you'd like:
Hi Peter! Thanks for the advise, I for sure will start doing it.
The bitwise operator
^
(XOR) can also be used to evaluate if only one of both given expressions is true and can be a useful shorthand:Since it is not a logical operator, it will cast to Number (0 = false, 1 = true), but
if
will accept any true-ish value, so you only need to cast to boolean if you actually require the result to be one.Unfortunately, there's no logical XOR operator in JS as of now.
Thanks for your input Alex! You have made more robust the post with your comment, I appreciate you took the time.