Javascript: How to use the comparison operators

Understand the differences in JavaScript between comparison operators == and != (=== and !==) and how they can affect your code.

JavaScript has two types of comparison operator: weak or abstract equality (==) and strict equality (===). The recommendation is to always use the latter.

A strict comparison (using, ===) is only valid if the operands are of the same type and if the contents of both correspond. Abstract comparison (using, ==) is more common, but it transforms(converts) the operands before the comparison, and this can cause countless problems.

At the end of the article there is a calculator with Javascript comparison operators for you to understand the concept in practice.

Features of the comparisons:

• Two Strings are strictly equal when they have the same sequence of characters with the same length and in the corresponding positions.
• When they are numerically equal two numbers are strictly equal (have the same number value). NaN is not equal to anything, but NaN included. Positive and negative zeros are compatible with each other.
• If both are true, or both are false, two Boolean operands are strictly equal.
• For either strict or weak comparisons two distinct objects are never equal.
• The expression comparing objects is true only if the operands refer to the same object.
• Null and undefined are strictly equal to themselves and abstractly equal to each other.

JavaScript comparison operator

Equality (==) 

The equal or weak operator converts the operands during the comparison (temporarily). If they are not of the same kind, after a strict comparison is made after the transformation. If both operands are objects then JavaScript compares the internal references, which are the same if the memory operands refer to the same object.

1 == 1 // true
'1' == 1 // true
1 == '1' // true
0 == false // true
0 == null // false
0 == undefined // false
null == undefined // true

Inequality (!=) 

The inequality operator works extremely similarly to the equality operator above, the difference is that it returns true if the operands are different. Type conversion also happens here. 

1 != 1 // false
"1" != 1 // false
1 != '1' // false
0 != false // false
0 != null // true
0 != undefined // true
null != undefined // false

Identity / strict equality (===) 

The strict equality operator returns true if the operands are strictly the same, i.e. contain the same value and are of the same type, without type conversion. 

1 === 1 // true
"1" === 1 // false
1 === '1' // false
0 === false // false
0 === null // false
0 === undefined // false
null === undefined // false

Non-identity / strict inequality (!==) 

The non-identity operator returns true if the operands are not equal and/or not of the same type. 

1 !== 1 // false
"1" !== 1 // true
1 !== '1' // true
0 !== false // true
0 !== null // true
0 !== undefined // true
null !== undefined // true

Comparison between Objects

If you’re working with objects, simple objects here, let’s not deal with nested objects for now, if you need to know more about nested objects you can visit this post with 3 Powerful Ways to Access Properties in Javascript Objects. The restricted and abstract comparison works in different ways from the primitive types as I have already mentioned.

For reference types the javascript comparison operator == and === act consistently with each other. Following the rule, both operators return false because even if they have the same values, they have different memory addresses which make them different objects.

[1,2,3] == [1,2,3];  // false
[1,2,3] === [1,2,3]; // false

{ x: 1, y: 2 } == { x: 1, y: 2 }  // false
{ x: 1, y: 2 } === { x: 1, y: 2 } // false

And of course, there is a special case. When you compare a literal String with an Object that has the same value as the literal String.

For example, consider comparing a literal string with a string object created by the String constructor.

"abc" == new String("abc")    // true
"abc" === new String("abc")   // false

Here the operator == is checking the values of the two operands and returning true, because after conversion they are strictly equal.

The operator === checks if they are of the same type. A literal string and a string created with the constructor are not the same, so it returns false.

Which one is correct? That really depends on what you’re trying to compare. My advice is to ignore the issue completely and simply not use the String Builder to create string objects. And use the restricted comparator (===), decrease the amount of problems in your life.

6 Comments

Dave Gebbia

tҺe website іѕ really good, I love your blog!

Lynda Weasel

Bookmarked!, I really like your site!

Chinaza

Nice work

Chinaza

Nice writeup

Leoma Torrie

I simply want to mention I am newbie to blogging and actually savored you're blog site. More than likely I’m planning to bookmark your blog post . You definitely have terrific well written articles. Thanks a lot for sharing with us your blog.

product review

Good job thanks for sharing. great work.