JavaScript

Difference between == and === ?

One of favorite interview question on JavaScript which I normally get started with. And it turns out the answer I knew, and in fact invariable everyone who gave the answer,  were wrong.

So the answer I expected is

== check the value and === check both value and type

Well it turns out although from the behavior or output of it it seems correct but in reality it’s actually not what is happening.

I happen to listen to Kyle Simpson at his talk New Rules For JavaScript and he explain very well, why we are wrong when we consider the above statement.

So what happens really when a comparison operator is called in JS.

=== is known as Strict Equality Comparison and the algorithm it follows is below

  1. If Type(x) is different from Type(y), return false.
  2. If Type(x) is Undefined, return true.
  3. If Type(x) is Null, return true.
  4. If Type(x) is Number, then
    1. If x is NaN, return false.
    2. If y is NaN, return false.
    3. If x is the same Number value as y, return true.
    4. If x is +0 and y is −0, return true.
    5. If x is −0 and y is +0, return true.
    6. Return false.
  5. If Type(x) is String, then
    1. If x and y are exactly the same sequence of characters (same length and same characters in corresponding positions), return true.
    2. Else, return false.
  6. If Type(x) is Boolean, then
    1. If x and y are both true or both false, return true.
    2. Else, return false.
  7. If x and y are the same Symbol value, return true.
  8. If x and y are the same Object value, return true.
  9. Return false.

Where as == or the Abstract Equality Comparator follows the algorithm listed below:

  1. If Type(x) is the same as Type(y), then
    1. Return the result of performing Strict Equality Comparison x === y.
  2. If x is null and y is undefined, return true.
  3. If x is undefined and y is null, return true.
  4. If Type(x) is Number and Type(y) is String,
    return the result of the comparison x == ToNumber(y).
  5. If Type(x) is String and Type(y) is Number,
    return the result of the comparison ToNumber(x) == y.
  6. If Type(x) is Boolean, return the result of the comparison ToNumber(x) == y.
  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).
  9. If Type(x) is Object and Type(y) is either String or Number,
    return the result of the comparison ToPrimitive(x) == y.
  10. Return false.

There are two things to notice here:

  1. === is not really doing any type checking. Where as == is actually doing type conversion.
  2. As opposed to common belief == actually do more work than ===

According to this test result at jsPerf.com almost in all browsers == takes more time than === although marginally.

So essentially the correct answer to the above question show be:

== does type conversion when comparing whereas === do not do it.

In other words

== allow coercion and === do not allow it.

Advertisements
Standard

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s