Relational operators in JavaScript

Relational operators in any language perform an essential task of comparison. They compare values, variables, expressions, results, and so on. We model our choices in the real world as relations between those two conditions in a code. Therefore, relational operators become a way of bringing the real world into the world of 1’s and 0’s. This article will look at relational operators in JavaScript and code illustrations for each. For simplicity, I will assume the following value of variable alpha in all code examples.

const alpha = 10;Code language: JavaScript (javascript)

Equality operator (==)

As we know, the equality relational operator (==) in many well-known languages tests the equality of two conditions. But with JavaScript, there is a slight twist to it. Consider the following example:

alpha == 10Code language: JavaScript (javascript)

Well, as we know very well, it will return the answer “true.” Now consider the following example:

alpha == "10"Code language: JavaScript (javascript)

What do you think this will return? alpha is an “integer” type variable, and “10” represents a string type. Therefore, many will stamp the answer as “false.” But here is the twist. It returns true. So, why is this so? The “==” operator in JavaScript only does ” value-checking.” So, as long as the “values” of the two expressions or variables under consideration are identical, “==” will return true.

Not Equal operator (!=)

Like, the “==” operator, it focuses on “value checking.” Therefore, “!=” will return true if and only if the values of the two variables or expressions differ. For instance,

alpha != "15"Code language: JavaScript (javascript)

The above expression will return true because the alpha and “15” values differ. But instead, consider the following example:

alpha != "10"Code language: JavaScript (javascript)

This expression will return false since the values of alpha and “10” are the same. So technically, alpha and “10” are identical, and “!=” therefore, returns false.

Strict Equal operator (===)

Having looked at the equality (==) operator, let’s focus on the strict equality (===) operator. We know that “==” performs value-checking. But “===,” on the other hand, conducts both value-checking and type-checking. Therefore, when using the strict equality relational operator, you will only get a true if both the values and types of the expression are the same. Take a look at the below example:

alpha === 10Code language: JavaScript (javascript)

The expression above will return true since alpha is an integer and has the value 10, which is the same as the right-hand-side of ===. However, consider this expression below:

alpha === "10"Code language: JavaScript (javascript)

This expression, on the other hand, will return false. Although the values of alpha and 10 are the same, their types are different. alpha is an integer type, whereas “10” is a string type. Therefore, the “===,” because of type mismatch, returns false

Strict Not Equal operator (!==)

The type is the primary condition for the “!==” operator. So, this will return true straightaway if the types of the two expressions or variables differ. However, if the types are the same, then the value matters. If the values are different, then “!==” returns true, else it returns false.

alpha !== "10"
alpha !== 15Code language: JavaScript (javascript)

The first expression returns true since the types of conditions on the other sides are different. In the second expression, even if the types are the same, the values of the two conditions differ. Therefore, even in the second expression, it will return true

Greater Than operator (>)

The “greater than” relational operator returns true if the value on the left-hand side of “>” is larger than the right-hand side. We perform only value-checking for this operator, the type of expression is ignored. For instance:

alpha > 5Code language: JavaScript (javascript)

Greater Than Equal To operator (>=)

The “greater than equal to” relational operator returns true if the value on the left-hand side of “>=” is larger or equal to the right-hand side. We perform only value-checking for this operator, the type of expression is ignored. For instance:

alpha >= "10"Code language: JavaScript (javascript)

Less Than operator (<)

The “less than” relational operator returns true if the value on the left-hand side of “<” is smaller than the right-hand side. We perform only value-checking for this operator, the type of expression is ignored. For instance:

alpha < 15Code language: JavaScript (javascript)

Less Than Equal To operator (<=)

The “less than equal to” relational operator returns true if the value on the left-hand side of “<=” is smaller or equal to the right-hand side. We perform only value-checking for this operator, the type of expression is ignored. For instance:

alpha <= "10"Code language: JavaScript (javascript)

in operator

We use the in operator to detect whether a property or a key exists in an object. It is tricky to understand upfront, so let’s tackle it with an example:

const names = ['John', 'Mary', 'Tom', 'Susan'];Code language: JavaScript (javascript)

Consider the names array above. Now we will see how the in operator behaves in the case of an array:

1 in names; // true since the index "1" exists in names array

4 in names; // false since the index "4" does not exist in names arrayCode language: JavaScript (javascript)

Now consider a particular example that maybe helps to make the usage of “in” operator clear:

'John' in names;Code language: JavaScript (javascript)

We expect this above expression to return true right? But instead, it returns false. Why is this so? This happens because the “names” array does not contain the key 'John'. John exists in the array but at index 0, which is the key existing in the array object. And the in operator checks for keys in the object, not the values. Therefore, “0 in names” returns true, but “'John' in names” returns false.

On similar lines, consider another example:

const fruit = { name: "Apple", color: "Red", taste: "Sweet" };

color in fruit; // expression 1
"Red" in fruit; // expression 2Code language: JavaScript (javascript)

Thus, based on our previous learnings of the in operator, let’s look at the above example. We know fruit is an object. So all the keys of the fruit object can be checked using the in operator. Therefore, “expression 1” will return true, whereas “expression 2” will return false.

instanceof operator

We use this operator to perform type checking at the runtime. We often run into errors because we are referencing the wrong objects or types of objects. And since we generate these objects at runtime, there must also be a way to determine their type at runtime. This practice helps us to catch errors and easily debug our code. Consider the code below:

const testString = new String('hello world');
testString instanceof String;Code language: JavaScript (javascript)

The first line creates a new String object by the name testString to which we assign the value hello world. The second line compares if the variable testString is of the type String or not.

Let’s look at an example wherein we use instanceof for runtime type checking:

// somewhere in the code objName is generated
...
if (objName instanceof objType) {
    // runtime type check successfully passed, proceed with statements in if block
}
else {
    // runtime type check failed, catch the error
}
...Code language: JavaScript (javascript)

Here the objName generated above in the code is checked against objType. If the type check passes, we execute statements in if block (like a try block). Otherwise, if the type check fails, we execute statements in the else block (like a catch block).

Conclusion

I believe I could provide you with a detailed overview of the relational operators in JavaScript. As we have seen above, they form essential tools in even the most basic code. We use them to compare two variables and expressions or even check the presence of a key in an object (in operator), or check object type at runtime (instanceof operator). These are fundamental concepts in coding but combining them with large codes becomes tricky. You need to understand the nuances of using which relational operator in what scenario (check this as a light premise). As we have seen, relational operators have become extremely important, even for debugging purposes. Happy Coding!