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 or 0n
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.

Last Updated 1657972636216