Comparison

We often need to compare values when we are programming. JavaScript has several ways to compare two values.

Equality

Remember earlier, when we assigned a value to a variable? We used the = operator to do this, which would be the logical choice for testing if two values are equal.
Unfortunately, we can’t use it because it is used for assigning values to variables. For example, say we had a variable called answer and we wanted to check if it was equal to 5, we might try doing this:

answer = 5;
<< 5  

What we’ve actually done is assign the value of 5 to the variable answer, effectively overwriting the previous value!
The correct way to check for equality is to use either a double equals operator, ==, known as "soft equality" or the triple equals operator, ===, known as "hard equality".

Soft EqualityWe can check if answer is in fact equal to 5 using soft equality, like so:

answer == 5;
<< true  

This seems to work fine, but unfortunately there are some slight problems when using soft equality:

answer == "5";
<< true  

As you can see, JavaScript is returning true when we are checking if the variable answer is equal to the string "5", when in fact answer is equal to the number 5. This is an important difference, but when a soft inequality is used, JavaScript will attempt to coerce the two values to the same type when doing the comparison. This can lead to some very strange results:

" " == 0;
<< true
" " == "0";
<< false
false == "0";
<< true
"1" == true;
<< true
"2" == true;
<< false
"true" == true;
<< false
null == undefined;
<< true  

As you can see, values that are not actually equal have a tendency to be reported as being equal to each other when using the soft equality operator.

Hard Equality

Hard equality also tests that the two values are the same type:

answer === 5;
<< true

answer === "5";
<< false


null === undefined;
<< false  

As you can see, hard equality reports that the variable answer is the number 5, but not the string "5". It also correctly reports that null and undefined are two different values.

When is Not a Number not Not a Number?

The only strange result produced by hard equality is this:

NaN === Nan;
<< false  

NaN is the only value in JavaScript that is not equal to itself. To deal with this, there is a special function called isNaN to test it:

isNaN(NaN);
<< true

isNaN(5);
<< false  

Unfortunately, this doesn’t always work properly, as can be seen in this example:

isNaN("hello");
<< true  

This is because the function first of all tries to convert the string to a number, and strings without numerals are converted to NaN:

Number("hello");
<< NaN  

The only way to accurately check if a value is NaN is to check that its type is a number (because NaN is of type "number") and also check that the isNaN function returns true. These two conditions should be combined using the logical AND (&&) that we saw earlier:

isnan = NaN; // set the variable isnan to be NaN
<< NaN
notnan = "hello"; // set the variable notnan to "hello"
<< "hello"
typeof(isnan) === "number" && isNaN(isnan);
<< true
typeof(notnan) === "number" && isNaN(notnan);
<< false  

So, a JavaScript ninja should always use hard equality when testing if two values are equal. This will avoid the problems caused by JavaScript’s type coercion.
If you want to check whether a number represented by a string is equal to a number, you should convert it to a number yourself explicitly:

> Number("5") === 5
<< true  

This can be useful when you’re checking values entered in a form as these are always strings.

Inequality

We can check if two values are not equal using the inequality operator. There is a soft inequality operator, != and a hard inequality operator, !==. These work in a similar way to the soft and hard equality operators:

16 != "16"; // type coercion makes these equal
<< false
16 !== "16";
<< true  

As with equality, it is much better to use the hard inequality operator as this will give more reliable results unaffected by type coercion. 

Greater Than and Less Than

We can check if a value is greater than another using the > operator:

8 > 4; << true  

You can also use the "less than" < operator in a similar way: 

8 < 4; << false  

If you want to check if a value is greater than or equal to another value, you can use the >= operator, but be careful, the equality test works in the same way as the soft equality operator:

8 >= 4;
<< true
8 >= 8;
<< true
8 >= "8";
<< true  

As you can see, type coercion means that strings can be confused with numbers. Unfortunately, there are no "hard" greater-than or equal-to operators, so an alternative way to avoid type coercion is to use a combination of the greater-than operator, logical OR, and a hard equality:

8 > 8 || 8 === 8;
<< true
8 > "8" || 8 === "8";
<< false  

There is also a similar "less-than or equal-to" operator:

-1 <= 1;
<< true
-1 <= -1;
<< true  

These operators can also be used with strings, which will be alphabetically ordered to check if one string is "less than" the other:

"apples" < "bananas";
>> true  

Be careful, though, as the results are case-sensitive and upper-case letters are considered to be "less than" lower-case letters:

"apples" < "Bananas";
>> false