Everything About the Javascript Logical AND Operator

The logical AND (&&) operator in Javascript is frequently used in Javascript logic, but it can also be used to return a value. The way works is similar, but their logic is different. The AND operator returns true if all operands are , and if any operand is . && && true false false If used outside of boolean contexts, it acts as the opposite of - it will return the first operand encountered, or otherwise default to the right-hand operand if they are all true. || falsy 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 and in Javascript. You can learn about both truthy and falsy here - in essence, the following values are considered , while anything else is considered : || && truthy falsy falsy truthy false or or 0 -0 0n any empty string, i.e. "" null undefined NaN How does the logical AND operator work in Javascript In boolean contexts, simply returns if all operands are or , and , if any operand is or . When I say boolean contexts, I am referring to situations where or is expected, such as in statements, or any statement which tests logic in some way. && true truthy true false falsy false true false if..else The reason it works this way is because these statements coerce or statements to either true or false. Let's look at some examples of in boolean contexts: truthy falsy && // 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 value is found, it returns the value, but it otherwise returns the value. Since it compiles to a returned value if any value is found, it returns overall. Otherwise, it returns and therefore . && && falsy falsy truthy falsy false truthy true Returning Values with the AND operator This is something that 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 value as your first choice, but otherwise, default to the right-hand operand given. That's because will default to the operand if the operand is found to be . Let's look at some examples. falsy && right-hand left-hand truthy // 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 , it is going to go to the second one. && && truthy It then returns the second one, and if that is , the whole statement is - otherwise, if it's the whole statement is - since all operands need to be with AND. truthy true falsy false true Chaining the AND operator Since it's an operator, can be chained, but the same logic is applied. It will return the first operand in the chain but otherwise, return the final operand. Let's look at a few examples. && falsy // 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 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 . && returning falsy Also published . here