JavaScript: Equality

Unlike most languages that I have encountered, JavaScript has a fairly tricky way of handling equality. It is possible in JavaScript for things that are clearly not the same to be equal. Just the same, things that seem the same can be not equal.

In most programming languages to check for equality you simply use a double equals symbol. This also works in JavaScript.

I apologize for the length of the examples but the examples are fairly complete based on the types available in JavaScript.

JavaScript

// To get the results below open your browsers developer tools, 
// hit F12 on the keyboard. Then select the console and you 
// will be able to type the code below

true == true
true

false == false
true

1 == 1
true

0 == 0
true

-1 == -1
true

"true" == "true"
true

"false" == "false"
true

"1" == "1"
true

"0" == "0"
true

"-1" == "-1"
true

"" == ""
true

null == null
true

undefined == undefined
true

Infinity == Infinity
true

-Infinity == -Infinity
true

The confusing part, for many, is when things that are not the same are equal.

JavaScript

true == 1
true

false == 0
true

"1" == true
true

"1" == 1
true

"0" == false
true

"0" == 0
true

"-1" == -1
true

"" == false
true

"" == 0
true

null == undefined
true

[] == false
true

[] == 0
true

[] == ""
true

[[]] == false
true

[[]] == 0
true

[[]] == ""
true

[0] == 0
true

[0] == false
true

[1] == true
true

[1] == 1
true

The reason why those checks showed as equal is because JavaScript does what is called “Type Coercion”. Type coercion is JavaScript attempting, in any way it can to make the values both have the same type. For example, given the string “1” and the number 1, JavaScript will convert both to strings and then check if they are the same. If you want to prevent this coercion there is a simple fix. Instead of using a double equals symbol, use a triple equals symbol.

JavaScript

true === 1
false

false === 0
false

"1" === true
false

"1" === 1
false

"0" === false
false

"0" === 0
false

"-1" === -1
false

"" === false
false

"" === 0
false

null === undefined
false

[] === false
false

[] === 0
false

[] === ""
false

[[]] === false
false

[[]] === 0
false

[[]] === ""
false

[0] == 0
false

[0] === false
false

[1] === true
false

[1] === 1
false

As you can see with the triple equals symbol the checks are now not equal. I would suggest to always use the triple equals unless it is preventing a behavior where you require the type coercion to take place. These situations should be few and far between.

There is one last gotcha with equality checks in JavaScript. This one actually applies to almost every language. There are 2 types of values in programming:

  1. Value
  2. Reference

A “Value” value can be a number, a string, or a constant; whereas a “Reference” value is pretty much anything else. This is important to know because reference values will not be equal, even if they are exactly the same, unless they are actually the same thing. For instance, a collection (called an Array) in JavaScript is not equal to another Array unless it is the same Array. Also in the list of reference values are objects and the special NaN (Not a Number) which is a kind of error code in JavaScript.

JavaScript

[] === []
false

[] == []
false

var a = {}, b = {}; // We will cover what this is doing later
// for now just know that it is needed to prevent an error
a === b // {} === {}
false

a == b // {} == {}
false

[[]] === [[]]
false

[[]] == [[]]
false

[0] === [0]
false

[0] == [0]
false

[1] === [1]
false

[1] == [1]
false

// Nothing is equal to NaN, not even itself
NaN === NaN
false

NaN == NaN
false

That is all there is to equality in JavaScript. As Always, I hope you learned something from this, but if not please look at some of the other articles as they are more advanced and may lend you some insight in the world of software development.

Leave a Reply

Your email address will not be published. Required fields are marked *