Updated June 12, 2023
Introduction to Logical Operators in JavaScript
Just like other programming or scripting languages, JavaScript also has logical operators. The logical operators are used to perform logical operations on the values; they are used along with the comparison operators mostly. In general, the logical operators are used along with the Boolean values in other languages. However, in the case of JavaScript, the logical operators can be applied to any value along with the Boolean values. In JavaScript, these operators behave differently depending upon the values processed. In this article, we will see different logical operators in JavaScript and how they behave in different types of values.
Examples of Logical Operators in JavaScript
The logical operators available in JavaScript are logical AND (&&), logical OR (||), and logical NOT (!). You can use these operators with any of the primitive values or objects. The result of these operators will be of any type, including Boolean type in the case of JavaScript particularly. The operators (&&) and (||) behave more than usual; instead of returning the Boolean value every time, they return the value of the operand passed. The operand here can be of the Boolean type or non-Boolean type value. You can use this feature effectively to achieve a better outcome.
1. Logical NOT (!) operator
You use the logical operator NOT to invert the value it operates on. It is represented by the exclamation mark (!) symbol.
| Input | Operation |
| true | false |
| false | true |
From the table, the not operator will alter the value from true to false and vice versa. People also call this operation negation. You can use the NOT operator with non-Boolean values as well. The JavaScript will convert the value to the Boolean one and return the inverse of it.
Example
Code:
<!DOCTYPE html>
<html>
<head>
<title>
Logical operators in JavaScript
</title>
<style>
.results {
border: green 1px solid;
background-color: aliceblue;
text-align: left;
padding-left: 20px;
height: 300px;
width: 95%;
}
.resultText {
font-size : 20px;
font-style : normal;
color : blue;
}
</style>
</head>
<body>
<div class = "results">
<h2> Results of different operations using logical operators </h2>
<div class = "resultText">
<p id = "result1"> </p>
<p id = "result2"> </p>
<p id = "result3"> </p>
</div>
</div>
<script>
document.getElementById("result1").innerHTML = " !true: " + !true;
var x = 5;
document.getElementById("result2").innerHTML = " var x = 5 </br> !x = " + !x;
var y = 0;
document.getElementById("result3").innerHTML = " var y = 0 </br> !y = " + !y;
</script>
</body>
</html>Output:
Here, we have three operations performed using the NOT operation. The first is on the Boolean value true, which returns false; the second scenario involves an integer value. This value converts into Boolean as true, but the NOT operation returns false. In the third scenario, the value is 0, which the system treats as false, returning false as well.
2. Logical AND (&&) operator
You use the logical AND operator to evaluate all the values from the expression. It is represented by using the two ampersands (&&). The AND operator returns true in case of all the conditions in the expression are true. As already discussed, the AND operator returns the operand value when a non-Boolean value is passed.
Example
Code:
<!DOCTYPE html>
<html>
<head>
<title>
Logical operators in JavaScript
</title>
</head>
<body>
<div class = "results">
<h2> Results of different operations using logical operators </h2>
<div class = "resultText">
<p id = "result1"> </p>
<p id = "result2"> </p>
<p id = "result3"> </p>
<p id = "result4"> </p>
</div>
</div>
<script>
var x = 5;
var y = 0;
document.getElementById("result1").innerHTML = " (x == 5 && y == 0) : " + (x == 5 && y == 0);
document.getElementById("result2").innerHTML = " (x == 5 && 10) : " + (x == 5 && 10);
document.getElementById("result3").innerHTML = " (10 && x ==5) : " + (10 && x ==5);
document.getElementById("result4").innerHTML = " (0 && x ==5) : " + (0 && x ==5);
</script>
</body>
</html>Output:
Both expressions will result in True, causing the condition to evaluate as True; the second example converts a non-Boolean value to True and returns it as the same value. In the third example, we have both expressions as true after conversion and true as output. In the previous example, we consider the number zero as false. The AND operator will return the value of zero instead of a Boolean value.
3. Logical OR (||) operator
The logical operator returns true in case any of the values from the expression is true; having all the values as true is unnecessary. It is represented by using two verticle lines. The working of the OR operator is similar to the AND operator in JavaScript by just following the OR operation.
Example
Code:
<!DOCTYPE html>
<html>
<head>
<title>
Logical operators in JavaScript
</title>
</head>
<body>
<div class = "results">
<h2> Results of different operations using logical operators </h2>
<div class = "resultText">
<p id = "result1"> </p>
<p id = "result2"> </p>
<p id = "result3"> </p>
<p id = "result4"> </p>
</div>
</div>
<script>
var x = 5;
var y = 0;
document.getElementById("result1").innerHTML = " (x == 5 || y == 0) : " + (x == 5 || y == 0);
document.getElementById("result2").innerHTML = " (x == 15 || y == 10) : " + (x == 15 || y == 10);
document.getElementById("result3").innerHTML = " (10 || x ==5) : " + (10 || x ==5);
document.getElementById("result4").innerHTML = " (0 || x ==5) : " + (0 || x ==5);
</script>
</body>
</html>Output:
The output can resemble the AND operator example. When any one of the statements is true, the OR operator returns the true or a non-Boolean value passed; otherwise, it returns false.
Conclusion
The logical operators in JavaScript are AND, OR, and NOT. In JavaScript, you can use these operators on non-Boolean values as well. In this case, they will return the operand value.
Recommended Articles
This is a guide to Logical Operators in JavaScript. Here we discuss the introduction, examples of Logical Operators in JavaScript, and the codes and outputs. You may also have a look at the following articles to learn more –
