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, but in the case of JavaScript, the logical operators can be applied to any type of values 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 will see 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 (!). These operators are used with any of the primitive values or objects. The result of these operators will be of any type including Boolean type in case of JavaScript particularly. The operators (&&) and (||) behave more than usual, instead of returning Boolean value every time, they return the value of operand passed. The operand here can be of the Boolean type or non-Boolean type value. This feature can be used effectively to achieve a better outcome.
1. Logical NOT (!) operator
The logical operator NOT is used to inverse the value upon which it is used. 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. This operation is also called as negation. The NOT operator can be used over the 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 NOT operation. First is on Boolean value true which returns false, second is on integer value which gets converted into Boolean as true and NOT operation returns false, and the third is value 0 which is treated as false and false is returned.
2. Logical AND (&&) operator
The logical AND operator is used 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:
In the first example, both the expressions will return true and condition will be evaluated as True, In the second example, we have a non-Boolean value which gets converted as true and the return value is the same value itself. In the third example, we have both expressions as true after conversion and true as output. In the last example, the zero is treated as false and instead of returning a Boolean value, the AND operator returns the value zero as it is.
3. Logical OR (||) operator
The logical operator returns true in case of any of the value from the expression is true, It is not necessary to have all the values as true. 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 be resembled with 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, these operators can be used upon 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 along with the codes and outputs. You may also have a look at the following articles to learn more –
