JavaScript - Comparison Operators

Hello there, future JavaScript wizards! Today, we're going to dive into the magical world of comparison operators. Don't worry if you've never written a line of code before – I'll be your friendly guide on this exciting journey. So, grab your wands (I mean, keyboards), and let's get started!

JavaScript Comparison Operators

Comparison operators are like the judges in the programming world. They look at two values and decide how they relate to each other. Are they equal? Is one greater than the other? These operators help us make decisions in our code, much like how we make decisions in real life.

Let's take a look at all the comparison operators we'll be covering today:

Operator	Name	Example
==	Equality	x == y
!=	Inequality	x != y
===	Strict Equality	x === y
!==	Strict Inequality	x !== y
>	Greater Than	x > y
>=	Greater Than or Equal	x >= y
<	Less Than	x < y
<=	Less Than or Equal	x <= y

How comparison is done?

Before we dive into each operator, let's understand how JavaScript compares values. It's not too different from how we compare things in real life!

1. If we're comparing numbers, it's straightforward. JavaScript checks which number is larger.
2. For strings, JavaScript compares them character by character, based on their Unicode values.
3. If we're comparing different types (like a number and a string), JavaScript usually tries to convert one type to another before comparing.

Now, let's look at each operator in detail.

JavaScript Equality (==) Operator

The equality operator (==) checks if two values are equal, but it's a bit flexible. It can convert types before comparing. Let's see some examples:

console.log(5 == 5);     // true
console.log(5 == "5");   // true
console.log(true == 1);  // true
console.log(null == undefined);  // true

In the first example, it's clear why we get true. In the second, JavaScript converts the string "5" to a number before comparing. The third example might surprise you – JavaScript considers true as 1 and false as 0. The last example shows that null and undefined are considered equal with the == operator.

JavaScript Inequality (!=) Operator

The inequality operator (!=) is like the opposite of ==. It checks if two values are not equal.

console.log(5 != 6);     // true
console.log(5 != "5");   // false
console.log(true != 1);  // false

Just like ==, it also does type conversion before comparing.

JavaScript Strict Equality (===) Operator

Now, let's meet the strict equality operator (===). This operator is like the == operator's strict older sibling. It not only checks the value but also ensures the types are the same.

console.log(5 === 5);     // true
console.log(5 === "5");   // false
console.log(true === 1);  // false
console.log(null === undefined);  // false

See how the results are different from ==? The strict equality operator doesn't do any type conversion.

Strict Inequality (!==) Operator

The strict inequality operator (!==) is the opposite of ===. It checks if two values are not equal in value or type.

console.log(5 !== 6);     // true
console.log(5 !== "5");   // true
console.log(true !== 1);  // true

JavaScript Greater Than (>) Operator

The greater than operator (>) checks if the left value is greater than the right value.

console.log(10 > 5);   // true
console.log(5 > 10);   // false
console.log(10 > 10);  // false
console.log("b" > "a");  // true (compares Unicode values)

Remember, when comparing strings, it's based on their Unicode values, not their alphabetical order!

Greater Than or Equal (>=) Operator

The greater than or equal operator (>=) checks if the left value is greater than or equal to the right value.

console.log(10 >= 5);   // true
console.log(10 >= 10);  // true
console.log(5 >= 10);   // false

JavaScript Less Than (<) Operator

The less than operator (<) checks if the left value is less than the right value.

console.log(5 < 10);   // true
console.log(10 < 5);   // false
console.log(10 < 10);  // false

JavaScript Less Than or Equal (<=) Operator

The less than or equal operator (<=) checks if the left value is less than or equal to the right value.

console.log(5 <= 10);   // true
console.log(10 <= 10);  // true
console.log(10 <= 5);   // false

Comparing null, undefined and NaN

Comparing special values like null, undefined, and NaN can be tricky. Let's look at some examples:

console.log(null == undefined);  // true
console.log(null === undefined);  // false
console.log(NaN == NaN);  // false
console.log(NaN === NaN);  // false
console.log(null > 0);  // false
console.log(null == 0);  // false
console.log(null >= 0);  // true

The behavior with null and undefined can be surprising. NaN is not equal to anything, not even itself! And null in comparisons is converted to 0, but not in equality checks.

And there you have it, folks! We've journeyed through the land of JavaScript comparison operators. Remember, practice makes perfect, so don't be afraid to experiment with these operators in your own code. Happy coding!

Credits: Image by storyset