Logical Operators
Problem Statement
In this lesson, we'll learn how to negate and combine expressions with JavaScript's three logical operators: NOT (!
), AND (&&
), and OR (||
).
Objectives
Use
!
to negate an expressionConvert an expression to a boolean using
!!
Link conditions with the
&&
and||
operators
Use !
to Negate an Expression
!
to Negate an Expression!
NOT
!
NOTThe logical NOT operator (!
), also called the bang operator, operates on an expression, returning the opposite of the expression's truthiness. If x
resolves to a truthy value, !x
returns false
. If x
is falsy, !x
returns true
:
Convert an Expression to a Boolean Using !!
!!
!!
!!
In the lesson on conditional statements, we passed values into the Boolean()
constructor function to check their truthiness. We'll learn all about constructor functions later in the course; for now, just think of it as a function that takes in some input, creates a new boolean from that input, and outputs the created boolean.
As a shorter way to convert any value into a boolean, we can use two NOT operators:
Reading from left-to-right, the JavaScript engine sees the first !
and looks to the right to check what we're asking it to invert (!truthyValue
). It then sees the second !
and looks to the right again, this time finding our truthyValue
variable. The engine resolves truthyValue
to "This value is truthy."
and then executes the second !
operator on it. !truthyValue
returns false
, so instead of !!truthyValue
we're now looking at !false
. The remaining !
operator then executes on false
, inverting the falsy value and evaluating to true
.
Try inverting various values in the browser's JS console to get a feel for the NOT operator. See what happens when you stack a ton of them: !!!!!!!!!truthyValue
.
On to the next!
Combine Conditions With the &&
and ||
Operators
&&
and ||
Operators&& AND
AND
The logical AND (&&
) operator takes two expressions:
The return value of the &&
operator is always one of the two expressions. If the first expression is falsy, &&
returns the value of the first expression. If the first expression is truthy, &&
returns the value of the second expression.
Again, if the first expression is falsy, &&
returns that value and exits without ever checking the second expression:
If the first expression is truthy, &&
then returns whatever the second expression evaluates to:
There are three different ways the &&
operator can be evaluated:
Left side
Right side
Return value
Truthiness of return value
Falsy
Doesn't matter
Left side
Falsy
Truthy
Falsy
Right side
Falsy
Truthy
Truthy
Right side
Truthy
If the left-side expression is falsy, the right-side expression doesn't matter at all. The
&&
operator returns the left side's falsy value and finishes.If the left-side expression is truthy, the
&&
operator returns the right side's value (whether it's truthy or falsy) and finishes. If you're feeling a little confused, that's ok. This is one of those concepts that's a a bit hard to understand unless you've played around with it in code, so make sure you're testing all of these new operators out in your browser's JavaScript console to get a feel for how they work.
OR
The logical OR (||
) operator also takes two expressions:
The return value of the ||
operator is always one of the two expressions. If the first expression is truthy, ||
returns the value of the first expression. If the first expression is falsy, ||
returns the value of the second expression.
If the first expression is truthy, that value is immediately returned and the second expression is never evaluated:
If the first expression is falsy, ||
returns whatever the second expression evaluates to:
There are three different ways the ||
operator can be evaluated:
Left side
Right side
Return value
Truthiness of return value
Truthy
Doesn't matter
Left side
Truthy
Falsy
Truthy
Right side
Truthy
Falsy
Falsy
Right side
Falsy
If the left-side expression is truthy, the right-side expression doesn't matter at all. The
||
operator returns the left side's truthy value and completes.If the left-side expression is falsy, the
||
operator returns the right side's value (regardless of whether it's truthy or falsy) and completes. As with the&&
operator, make sure you're testing out all of these outcomes in your browser's JS console!
Link Conditions with the &&
and ||
Operators
&&
and ||
OperatorsThe &&
and ||
operators are often used to link multiple conditions in a conditional statement:
Conclusion
Logical operators in Javascript are the powerful backbone on which most website logic is based. Once you understand how to control the different options available to you, the sky's the limit!
Resources
Last updated