# How does the Javascript logical AND (&&) operator work?

The logical AND (&&) operator in Javascript is frequently used in [Javascript logic](https://fjolt.com/article/javascript-logical-statements), but it can also be used to return a value. In another article, I have covered how the [logical OR (||) operator works](https://fjolt.com/article/javascript-logical-or). 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](https://fjolt.com/article/javascript-truthy-and-falsy) - 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:

```javascript
// 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](https://fjolt.com/article/javascript-nullish-coalescing) `??`. 

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.

```javascript

// 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.

```javascript
// 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](https://fjolt.com/article/javascript-logical-or). Knowing this is a useful tool in setting default values for variables you expect to be `falsy`.