Truth, Equality and JavaScript

Except when it has happened to you before, there are aspects of Javascript that can throw you off the guide. You might have read it somewhere before or even used it hundreds of time without discovering anything; what happens when a puppy, your pet, who is supposed to wag its tail at a your “ha-ha-ha-ha” (dog laugh sound that dogs use exclusively in play to say you mean no harm) just looked away or even worst, backed at the sound. The first, second, third time, then you begin to wonder what the problem is; maybe the pet needs some medical attention or it’s just reaction to something around.

One of the possible cause for your dog’s reaction when experimented with Javascript is coercion.

Image result for What? what's that gif
What? what’s that.

It’s simple, coercion is what happen when you try to compare two values with the loose equality operator (==). Now let’s go practical.

Suppose we want to compare these values:

1. Test 1 against true.

2. Test if 34 will also give us the same result.

3. What happen when we compare values using the == operator.

Related image
Grab your PC.

Now let’s test if the condition

 1 == true 
 will give us true or false.

Navigate to debugger mode on your browser by pressing CTR + SHIFT + J on Windows and CMD + SHIFT + Jon Mac.

As proved in the image above, the result from the test is true, and we are certainly sure we tested an integer value against a bool value. Now let’s try the same thing using another integer value, 34.

Don’t worry, I was in your shoe sometimes ago and I remember how I felt was when my little javascript application wasn’t giving the right output. The reason behind this would lead us to the third practical test which is how the browser interprets equality operators but before that, let’s talk about the other type of equality operator (The Strict Equality Comparison).

*The Strict Equality Operator (===)

Unlike the loose equality, this is quite simple and easy for error debugging because the very first thing it test for is the typeOf() property of the values. You will get the results you expect that are not subject to hard-to memorize conversion rules, comparing white to red is false as expected.

With this operator, when we test the condition

if(1 === '1')
The expected result is false and will always be because once the operator test for the typeOf() property of 1 to be integer and typeOf() property ‘1’ to be string, it returns false as the answer.

A good tabular representation of how the strict equality operator works in Javascript is shown below.

Image source :
Strict Equality Operator

Nothing complex happen when you test with === operator, all things are as they are.

More on loose equality.

Below is a scary tabular representation of how the loose operator works.

Image source : Loose Equality Operator
Image result for i need explanation gif
There’s go to be an explanation for this.

Let’s break it down using algorithm.

The comparison x == y, where x and y are values, produces true or false.
Such a comparison is performed as follows:

  • 1. If Type(x) is the same as Type(y), then
    1. 1. If Type(x) is Undefined, return true: undefined == undefined
    2. 2. If Type(x) is Null, return true: null == null
    3. 3. If Type(x) is Number, then
      1. 1. If x is NaN, return false: NaN != NaN
      2. 2. If y is NaN, return false: NaN != NaN
      3. 3. If x is the same Number value as y, return true: 2 == 2
      4. 4. If x is +0 and y is −0, return true: 0 == 0
      5. 5. If x is −0 and y is +0, return true: 0 == 0
      Return false: 2 != 1
    4. 4. If Type(x) is String, then return true if x and y are exactly the same sequence of characters (same length and same characters in corresponding positions). Otherwise, return false: "a" == "a" but "a" != "b" and "a" != "aa"
    5. 5. If Type(x) is Boolean, return true if x and y are both true or both false. Otherwise, return false: true == true and false == false but true != false and false != true
    6. 6. Return true if x and y refer to the same object. Otherwise, return false: var o = {}; o == o but o != {} and {} != {} and [] != [] ... etc, all objects are equal only if it's the same
  • 2. If x is null and y is undefined, return true: null == undefined
  • 3. If x is undefined and y is null, return true: undefined == null
  • 4. If Type(x) is Number and Type(y) is String, return the result of the comparison x == ToNumber(y): 2 == "2"
  • 5. If Type(x) is String and Type(y) is Number, return the result of the comparison ToNumber(x) == y: "2" == 2
  • 6. If Type(x) is Boolean, return the result of the comparison ToNumber(x) == y: false == 0 and true == 1 but true != 2
  • 7. If Type(y) is Boolean, return the result of the comparison x == ToNumber(y)
  • 8. If Type(x) is either String or Number and Type(y) is Object, return the result of the comparison x == ToPrimitive(y): ToPrimitive means implicit valueOf call or toString if toString is defined and valueOf is not
  • Take Away: 

    Coercion in Javascript is something you can’t do away with, I’ve provided some references at the bottom of this article for you to learn more on the topic.

    Use the == operator only when you are sure of the values being tested, else go with the strict counter-part (===) whose result will be strictly tested.

    2 comments on "Truth, Equality and JavaScript"

    • Good day Ismail.
      I hope you remember the day I asked you to return a true value in a function without using the true itself.

      I wanted you to return 1

      Tijani Mustapha wrote on
      • Frankly, I can’t remember the day and I won’t deny it couldn’t have happened because things of such are part of every programmer.

        Ismail Obadimu wrote on

    Leave a Reply

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