The Logical operators operate on a set of operands and return one of the operands as a return value. It is typically used on boolean operands, in which case the return value is a boolean. If the operands and not boolean values, then logical operators may return a non-boolean value. JavaScript has four logical operators. They are AND (&& ), OR ( || ) , NOT (!) & Nullish coalescing operator (??).
The syntax is as follows
The logical operators convert the operand to the boolean is a primitive type. The boolean represents a simple true/false value.
Every possible value in JavaScript can be converted to true & false. For Example, converting 100 to boolean will result in a true. And 0 becomes false.
Those values, which converts to false are known as falsy. And those, which converts to true are Truthy.
There are eight possible falsy values. They are
All other values convert to true, hence we call them truthy values.
Logical OR for a set of operands is true if and only if one of the operands convert to true (truthy). It returns the first truthy operand.
The Logical OR is denoted pipe symbol ||. The syntax is as shown below
expr1 || expr2
If expr1 can be converted to true, returns expr1; else, returns expr2.
Example
In the following example a > 5 is the first expression and b > 5 is the second expression. Since a > 5 is true, it evaluates the expression a > 5 and returns true
let a=10
let b=15
console.log(a > 5 || b > 5) //true
console.log(a > 5 || b < 5) //true although the b < 5 is false
In the following example, both the operands are not booleans. Both "Hello" & 100 are truthy values. Hence OR returns whichever appears first.
let strVar="Hello"
let numVar=100;
console.log(strVar || numVar) //Hello
console.log(numVar || strVar) //100
option1, option2 & option3 are all undefined. A undefined is a falsy value. Hence the first OR statement returns "Default"
But, when we assign a value to option3, it becomes truthy. Hence the next OR statement returns Option3
let option1, option2, option3
console.log(option1 || option2 || option3 || "Default") //Default
option3="option3"
console.log(option1 || option2 || option3 || "Default") //option3
You can chain multiple operands in a single statement.
The OR returns false only when both the operands are false. For all other combinations, it returns true.
console.log(true || false) //true
console.log(false || true) //true
console.log(true || true) //true
console.log(false || false) //false
Logical AND for a set of operands is true if and only if all of its operands are true. It returns the first falsy operand. If all the operands are true, then it returns the last operand.
The Logical AND is denoted by symbol &&. The syntax is as shown below
expr1 && expr2
If expr1 can be converted to true, returns expr2; else, returns expr1.
Example
In the first statement, both a >5 & b >5 are true. Hence it returns true. But the second AND statement b <5 is false, hence it returns false.>
let a=10
let b=15
console.log(a > 5 && b > 5) //true
console.log(a > 5 && b < 5) //false
//a > 5 is true, but b < 5 is false hence returns false
b
option1, option2 & option3 are all undefined. a undefined is a falsy value. Hence the first AND statement returns undefined.
But, when we assign a value to all options. now all of them become truthy. Hence the next AND statement returns Option3 (last truthy value).
let option1, option2, option3
console.log(option1 && option2 && option3) //undefined
option1="option1"
option2="option2"
option3="option3"
console.log(option1 && option2 && option3) //option3
AND returns true only if both operands are true. for all other combination returns false.
console.log(true && false) //false
console.log(false && true) //false
console.log(true && true) //true
console.log(false && false) //false
The Logical NOT operator takes only one Operand and converts it to a boolean. Then it produces true, if the operand evaluates to false, and false, if the operand evaluates to true
Syntax
!expr
The NOT operator always returns a boolean value.
Examples
alert( !true ); // false
alert( !0 ); // true
You can use the !! double not to convert a value into a boolean. The output of !! is the same as the Boolean global function
console.log(!"a") //false
console.log(!!"a") //true
console.log(Boolean("a")) //true
The logical operators in JavaScruot work differently compared to the other programming languages like C, C++, or C#. The following are some of the important points to remember.
The Operands of the Logical operators can be of any type. i.e because every possible value in JavaScript can be converted to true & false
As you can see from the above examples, the logical operators can return any value. In fact, they return one of the operands.
Expressions are evaluated from left to right.
If a match is found, then the evaluation stops, and the operand is returned. For Example for an OR Operator, evaluation stops when it finds the first truthy operand. And for AND operator is it the first falsy operand.
console.log(true || alert("Hello"))
//alert is never evaluated
console.log(false || alert("Hello"))
You can mix AND & OR together, but remember the operator Precedence. The following is the list of operator Precedence of logical operators along with some other relevant operators.
Always use the parenthesis to group the operands together to increase readability and also override the operator precedence.
In the example, below && is evaluated first resulting in false and then || is evaluated. Hence it returns true
true || false && false //true
By using the parentheses we can force the || to evaluate first and then the &&. Now the expression returns false.
(true || false) && false //false
Read More
