Comparison Operators
Comparison operators are used in logical statements to determine equality or difference between variables or values.
Given that x = 5, the table below explains the comparison operators:
| Operator | Description | Comparing | Returns |
|---|---|---|---|
| == | equal to | x == 8 x == 5 x == “5” | false true true |
| === | equal value and equal type | x ===5 x === “5” | true false |
| != | not equal | x != 8 | true |
| !== | not equal value or not equal type | x !== 5 x !== “5” x !== 8 | false true true |
| > | greater than | x > 8 | false |
| < | less than | x < 8 | true |
| >= | greater than or equal to | x >= 8 | false |
| <= | less than or equal to | x <= 8 | true |
How Can it be Used
Comparison operators can be used in conditional statements to compare values and take action depending on the result:if (age < 18) text = “Too young to buy alcohol”;
You will learn more about the use of conditional statements in the next chapter of this tutorial.
Logical Operators
Logical operators are used to determine the logic between variables or values.
Given that x = 6 and y = 3, the table below explains the logical operators:
| Operator | Description | Example |
|---|---|---|
| && | and | (x < 10 && y > 1) is true |
| || | or | (x == 5 || y == 5) is false |
| ! | not | !(x == y) is true |
Conditional (Ternary) Operator
JavaScript also contains a conditional operator that assigns a value to a variable based on some condition.
Syntax
variablename = (condition) ? value1:value2
Example:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Comparison</h2>
<p>Input your age and click the button:</p>
<input id="age" value="18" />
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
let age = document.getElementById("age").value;
let voteable = (age < 18) ? "Too young":"Old enough";
document.getElementById("demo").innerHTML = voteable + " to vote.";
}
</script>
</body>
</html>
Result:
Result is shown in your browser.
If the variable age is a value below 18, the value of the variable voteable will be “Too young”, otherwise the value of voteable will be “Old enough”.
Comparing Different Types
Comparing data of different types may give unexpected results.
When comparing a string with a number, JavaScript will convert the string to a number when doing the comparison. An empty string converts to 0. A non-numeric string converts to NaN which is always false.
| Case | Value |
|---|---|
| 2 < 12 | true |
| 2 < “12” | true |
| 2 < “John” | false |
| 2 > “John” | false |
| 2 == “John” | false |
| “2” < “12” | false |
| “2” > “12” | true |
| “2” == “12” | false |
When comparing two strings, “2” will be greater than “12”, because (alphabetically) 1 is less than 2.
To secure a proper result, variables should be converted to the proper type before comparison:
Example:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Comparisons</h2>
<p>Input your age and click the button:</p>
<input id="age" value="18" />
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
let voteable;
let age = Number(document.getElementById("age").value);
if (isNaN(age)) {
voteable = "Input is not a number";
} else {
voteable = (age < 18) ? "Too young" : "Old enough";
}
document.getElementById("demo").innerHTML = voteable + " to vote";
}
</script>
</body>
</html>
Result:
Result is shown in your browser.