Comparison And Logical 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:

How It Can 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:

‍

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:

‍

let voteable = (age < 18) ? "Too young" : "Old enough";

If the variable age is below 18, the value of the variable voteable will be "Too young", otherwise the value 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 during the comparison. An empty string converts to 0, and a non-numeric string converts to NaN, which is always false.

When comparing two strings, "2" is greater than "12" because (alphabetically) 1 is less than 2. To ensure proper results, variables should be converted to the proper type before comparison:

Example:

age = Number(age);
if (isNaN(age)) {
  voteable = "Input is not a number";
} else {
  voteable = (age < 18) ? "Too young" : "Old enough";
}

The Nullish Coalescing Operator (??)

The ?? operator returns the first argument if it is not nullish (null or undefined). Otherwise, it returns the second argument.

Example:

let name = null;
let text = "missing";
let result = name ?? text;

‍

The nullish operator is supported in all browsers since March 2020.

The Optional Chaining Operator (?.)

The ?. operator returns undefined if an object is undefined or null (instead of throwing an error).

Example:

// Create an object:
const car = { type: "Fiat", model: "500", color: "white" };
// Ask for car name:
document.getElementById("demo").innerHTML = car?.name;

‍

The optional chaining operator is supported in all browsers since March 2020.

‍