Logical operators in JavaScript are those operators which are used to form compound conditions by combining two or more simple conditions or relations.
In other simple words, logical operators combine the comparison into one condition group. It is useful when we to check more than one condition at a time and use the results.
Sometimes, the logical operators are also called Boolean operators in JavaScript because they return a boolean value of either true or false after evaluation.
With the help of Boolean operators, we can perform logical operations. We can create a powerful data testing statement by combining logical operators with relational operators.
A simple example of a logical operator that combines two relational expressions, or conditions, is as follows:
x > y && y > z
This kind of expression is called logical expression or compound relational expression.
Types of Boolean Operators in JavaScript
In JavaScript, there are three types of logical operators. They are listed in the below table:
| Operator | Description |
|---|---|
| && | Logical AND |
| || | Logical OR |
| ! | Logical NOT |
Logical AND Operator (&&) in JavaScript
The AND operator combines two expressions (or conditions) together into one condition group. Both expressions are tested separately by JavaScript interpreter and then && operator compares the result of both.
If the conditions on both sides of && operator are true, the logical && operator returns true. If one or both conditions on either side of the operator is false, then the operator returns false. For example:
if(x > y && y < z)
document.write("Hello JavaScript");
In the above statements, there are two conditions: x > y and y < z. Since both conditions are joined by the && operator, therefore, if both conditions are true, “Hello Java” will be displayed.
So, we can say that the AND operator returns true only if all the expressions (or operands) are true. Here are some more examples to understand logical AND operator.
1. 2 > 1 && 3 < 4; // true. 2. 1 == 1 && 99 >= 98; // true. 3. 1 == 2 && 5 <= 4; // false.
Let’s take some example programs based on logical AND operator.
Program code 1:
<script>
var x = 10, y = 5;
var result;
result = (x == 10 && y ==5);
document.write(result, "<br>");
result = (x == 10 && y > x);
document.write(result, "<br>");
result = (x < y && y > x);
document.write(result);
</script>
Output:
true
false
false
Program code 2:
<script>
var x = 20;
var y = 10;
var z = 25;
if(x > y && y > z)
{
document.write("Hello");
}
if(z > y && y < x)
{
document.write("JavaScript");
}
if((y+200) < x && (y+150) < z)
{
document.write("Hello JavaScript");
}
</script>
Output:
JavaScript
Explanation:
1. In the first if statement, there are two conditions: x > y and y > z. The condition x > y is true, but y > z is not true. Therefore, the statement “Hello” is not displayed.
2. In the second if statement, both conditions z > y and y < x are true. Therefore, the statement “JavaScript” is displayed.
3. In the third if statement, both conditions are false. Therefore, the statement “Hello JavaScript” is not displayed.
Program code 3:
<script>
var x = (15 < 20) && ("pen" < "pencil");
var y = ("Big" < "bigger") && (true !== 1);
var z = ("A" <= "A") && ("a" != "a");
document.write("x: " +x, "<br>");
document.write("y: " +y, "<br>");
document.write("z: " +z);
</script>
Output:
x: true
y: true
z: false
In the preceding program, x returns true because comparison on both sides is true. 15 is less than 20 and the string pen is less than pencil on the basis of ASCII codes.
Similarly, y returns true because the comparison on both sides is true. Whereas, z returns false because the comparison on right side is false.
Try It Out
Program code 4:
<script>
var p = true && true;
var q = false && true;
var r = 'a' && 'b';
var s = false && 'a';
var t = 'a' && true;
document.write("p: " +p, "<br>");
document.write("q: " +q, "<br>");
document.write("r: " +r, "<br>");
document.write("s: " +s, "<br>");
document.write("t: " +t);
</script>
Program code 5:
<script>
var p = (true == 1) && (false == 0);
var q = ("2" !== 2) && (2 === 2);
var r = ("5+5" === 5+5) && false;
var s = (false == 0) && (5 > 2);
var t = (10 >= "10") && true;
document.write("p: " +p, "<br>");
document.write("q: " +q, "<br>");
document.write("r: " +r, "<br>");
document.write("s: " +s, "<br>");
document.write("t: " +t);
</script>
Logical OR Operator (||) in JavaScript
The logical OR operator in JavaScript combines two or more expressions or conditions together into a single condition group. It uses the double pipes (||) as a symbol.
The OR operator returns true if either one or both of the conditions returns true. If the conditions on both sides of the operator are false, the logical OR operator returns false. For example:
if(x > y || y < z)
document.write("'JavaScript Logical Operators");
In the above statements, there are two conditions or expressions: x > y and y < z. Since both conditions are joined by the || operator, therefore, if any one of the conditions is true, “JavaScript Logical Operators” will be displayed on the web page.
So, we can say that the logical OR operator returns true only if at least one expression (or operand) is true. Here are some more examples to understand logical OR operator.
1. (2 == 2) || (3 > 5); // It will return true because comparison on the left side is true. 2. (5 > 18) || (3 != 9 ); // It will return true because comparison on the right side is true. 3. (4 == 4) || (5 < 9); // It will return true because comparison on both sides are true. 4. (4 < 2) || (2 == 1); // It will return false because both comparison are false. 5. (3 != 3) || (3 >= 9); // It will return false because both comparison are true.
Let’s take some example programs based logical OR operator in JavaScript.
Program code 6:
<script>
var x = 10, y = 5, z = 20;
if((x > y) || ( y == z))
document.write("One", "<br>");
if((x == y) || (y < z ))
document.write("Two", "<br>");
if((x !== y) || (y != z))
document.write("Three", "<br>");
if((x < y) || (y > z))
document.write("Four");
</script>
Output:
One
Two
Three
In the preceding program, both conditions are false in the last if statement. Therefore, “four” is not displayed on the browser.
Program code 7:
<script>
var a, b, c, d;
a = ("big " !== "bigger") || (false);
document.write("a: " +a, "<br>");
b = true || false;
document.write("b: " +b, "<br>");
c = "a" || D;
document.write("c: " +c, "<br>");
d = ("ABc" > "abC") || false;
document.write("d: " +d);
</script>
Output:
a: true
b: true
c: a
d: false
Try It Out
Program code 8:
<script>
var p = (true == 1) || (false == 0);
var q = ("2" !== 2) || (2 === 2);
var r = ("5+5" === 5+5) || false;
var s = (false == 0) || (5 > 2);
var t = (10 >= "10") || true;
document.write("p: " +p, "<br>");
document.write("q: " +q, "<br>");
document.write("r: " +r, "<br>");
document.write("s: " +s, "<br>");
document.write("t: " +t);
</script>
Logical NOT Operator (!)
The logical NOT operator is something different from the logical AND and OR operators. It is used on a single comparison. It is mainly used to reverse the result.
That is, if the condition evaluates true, the result of the condition returns false. If the expression evaluates false, the result of the condition returns true. For example:
if(!(2 > 5))
document.write("I love JavaScript Programming");
In the above statement, 2 is greater than 5 is false, but the NOT operator reverse the result and makes it true. Therefore, the next statement will display “I love JavaScript Programming” on the browser.
Let’s understand the NOT operator with the help of some more examples.
1. !(5 == 5); // It will return false because 5 is equal to 5 is true, but NOT operator makes this statement false. 2. !false; // It will return true because NOT operator reverses the false into true. 3. !true; // It will return false because NOT operator makes it false.
Let’s create a JavaScript program in which we will perform some operations based on NOT operator.
Program code 9:
<script>
var a, b, c, d;
a = !("ABc" > "ABC") || (false);
document.write("a: " +a, "<br>");
b = !true || !false;
document.write("b: " +b, "<br>");
c = ("20" >= 20) || !(20 === 20);
document.write("c: " +c, "<br>");
d = !("5" > 10) && !false && (10 != 20);
document.write("d: " +d);
</script>
Output:
a: false
b: true
c: true
d: true
Try It Yourself
Program code 10:
<script>
var a, b, c;
a = !("abc" < "ABCD") && !(false);
document.write("a: " +a, "<br>");
b = !true && !false;
document.write("b: " +b, "<br>");
c = !("20" !== 20) || !("20" === 20);
document.write("c: " +c, "<br>");
</script>
In this tutorial, you learned logical operators in JavaScript with various example programs. Hope that you will have understood the basic concepts of boolean AND, OR, and NOT operators in JavaScript.
Thanks for reading!!!
Next ⇒ Conditional Operators in JavaScript⇐ PrevNext ⇒