How does the Javascript logical AND (&&) operator work?
📣 Sponsor
The logical AND (&&) operator in Javascript is frequently used in Javascript logic, but it can also be used to return a value. In another article, I have covered how the logical OR (||) operator works. The way &&
works is similar, but its logic is different. The AND &&
operator returns true if all operands are true
, and false
if any operand is false
. If used outside of boolean contexts, it acts as the opposite of ||
- it will return the first falsy
operand encountered, or otherwise default to the right hand operand if they are all truthy.
In this complete guide, let’s look at how &&
works, and go through some examples to explain when it returns values, and what values it will return
Truthy and falsy in Javascript
Just like the ||
operator, &&
depends on the concept of truthy
and falsy
in Javascript. You can learn about both truthy and falsy here - in essence, the following values are considered falsy
, while anything else is considered truthy
:
false
0
or-0
or0n
- any empty string, i.e.
""
null
undefined
NaN
How does the logical AND operator work in Javascript?
In boolean contexts, &&
simply returns true
if all operands are truthy
or true
, and false
, if any operand is falsy
or false
. When I say boolean contexts, I am referring to situations where true
or false
is expected, such as in if..else
statements, or any statement which tests logic in some way.
The reason it works this way is because these statements coerce truthy
or falsy
statements to either true or false. Let’s look at some examples of &&
in boolean contexts:
// This statement is TRUE and the console.log fires,
// since "1" and "2" are both non-empty strings, so they are truthy
if("1" && "2") {
console.log('this is true');
}
// This statement is TRUE, and the console.log fires,
// since both statements test as true - 1 is less than 10, and 2 is less than 10
if(1 < 10 && 2 < 10) {
console.log('this is true');
}
// This statement is FALSE, and the console.log does not fire,
// since "" is falsy, and since one operand is false, the statement overall is false
if("" && 1 < 10) {
console.log('this is false');
}
In this context, the reason why &&
works this way, is because &&
returns a value. If a falsy
value is found, it returns the falsy
value, but it otherwise returns the truthy
value. Since it compiles to a returned value, if any falsy
value is found, it returns false
overall. Otherwise, it returns truthy
and therefore true
.
Returning Values with the AND operator
This is something which is not frequently seen too much, but as mentioned, the &&
statement does return a value, just like other operators such as ||
or the nullish coalescing operator ??
.
It can be used in scenarios where you want to return a falsy
value as your first choice, but otherwise default to the right hand operand given. That’s because &&
will default to the right hand operand if the left hand operand is found to be truthy
. Let’s look at some examples.
// This is set to "" since "" is falsy - && always takes the first operand if falsy
let x = "" && 1;
// This is set to 2, since 1 is truthy - && defaults to the right hand operand if the left hand is truthy.
let y = 1 && 2;
// This is set to 3, since `1 < 5` is truthy, so && defaults to the right hand operand
let z = 1 < 5 && 3;
If this is a little confusing, think of it in the context of how &&
is supposed to work again. &&
tests if all operands are true, and it works through them left to right. If the first is truthy
, it is going to go to the second one. It then returns the second one, and if that is truthy
, the whole statement is true
- otherwise, if it’s falsy
the whole statement is false
- since all operands need to be true
with AND.
Chaining the AND operator
Since it’s an operator, &&
can be chained, but the same logic is applied. It will return the first falsy
operand in the chain, but otherwise return the final operand. Let’s look at a few examples.
// x is set to 3, since true and 1 are both truthy.
let x = true && 1 && 3;
// y is set to false, since false is falsy.
let y = false && true && 3;
// z is set to x, since both {} and [] are truthy.
let z = {} && [] && x;
## Conclusion
The logical AND (&&
) operator is frequently used in Javascript, so understanding how it works is critical to using Javascript in the real world. Although we use it everyday, it’s not usually thought of as returning a value, or acting as the opposite of the OR operator. Knowing this is a useful tool in setting default values for variables you expect to be falsy
.
More Tips and Tricks for Javascript
- Detecting Device Orientation with Javascript
- Web Components and the Shadow DOM
- Javascript Dates and How they Work
- Javascript Array Some Method
- The Free Course for Javascript
- Javascript Proxy: Using Javascript Proxies like a Pro
- How fetch works in Javascript
- Javascript Array Concat Method
- How does the Javascript logical OR (||) operator work?
- How to remove a specific item from an array