Comments

== vs === vs Object.is()

Have you ever been stuck with a problem in your application and realize the issue is due to equality(==) operator. I know I have!! But why exactly this happens?

The comparison between values is done using 2 things:
a) Value which is your operand
b) Type which is the type of your operand like string, boolean

There is another thing which plays an important role while comparing values which is Type Casting.

But what is Type Casting ?

As JavaScript is a weakly typed language, sometimes the values are converted from one type to another automatically. This is called as Implicit Type Casting or Type coercion. Type casting plays a major role in our == operator which leads to certain bugs.

Different comparison operators

JavaScript provides 3 different comparison operators

a)  == operator
b) === operator
c) Object.is()

== or Abstract equality operator

  • Also known as Double equals or Loose equality operator which checks if only the values are equal and then returns true.
  • In this case if the type of the expressions are different, the expressions are converted to one common type using implicit type casting.

Examples

console.log(1 == "1")          // prints true

console.log(true == "true")  // prints true

console.log(NaN == "NaN")  // prints false

console.log(NaN == NaN)     // prints false as NaN is can never be equal to NaN

console.log(-1 == 1)   // prints false 

But,
console.log(-0 == 0)  // prints true

console.log({"name": "Arwa"} == {"name": "Arwa"})    // prints false as both have different references in memory

But,
let a = {"name": "Arwa"}
let b = a
console.log(a == b)   // prints true as both have same memory reference 

Cheat Sheet for you while using == operator

  • NaN is not equal to anything including itself
  •  -0 equals to 0
  •  null equals both null & undefined
  • The expressions are either converted to string, boolean or number
  • String comparison is case sensitive
  • If the two operands refer to the same object then it evaluates to true otherwise false
  • Always remember the 6 falsy values i.e (null, undefined, ”,0, NaN, false)

=== or Strict equality operator

  • Also known Triple equals or Identity operator or as I would call it a “Life Saver Equality Operator” is very similar to == operator except it doesn’t do any implicit type casting.
  • This operator returns true if both the value and the type of the left & right side expressions are equal.

 Examples

console.log(1 === "1")          // prints false as both are different types (Number vs String)

console.log(true === "true")  // prints false as both are of different types (Boolean vs String)

console.log(true === true)   // prints true as both are of same type (Boolean vs Boolean) and value

console.log(NaN === NaN)     // prints false as NaN is can never be equal to NaN

console.log(null === null)   // prints true

console.log("Arwa" === "arwa")  // prints false as string comparison is case sensitive

console.log(-0 === 0)  // prints true here as well

console.log({"name": "Arwa"} === {"name": "Arwa"})    // prints false as well in this case as both have different references in memory

But,
let a = {"name": "Arwa"}
let b = a
console.log(a === b)   // prints true as both have same memory reference

Cheat Sheet for you while using === operator

  • -0 equals to 0
  • null only equals to null
  •  String comparison is case sensitive
  • NaN is not equal to anything including itself
  • If the two operands refer to the same object then it evaluates to true otherwise it returns false

Object.is()

Syntax: Object.is(value 1, value 2)

  • Also known as Same-value equality operator is the newest addition to comparison operators (available from ES2015).
  •  It checks if the two values are the same using the following rules

Rule 1: Both values are undefined

Example

let a;
let b;
Object.is(a,b) // returns true   

 

Rule 2: Both values are strings of the same length, with the same characters in same order

Example 

Object.is("Comparison Operators", "Comparison Operators") // returns true
however,
Object.is("Comparison Operators","comparison operators") // returns false as it is case sensitive

 

Rule 3: Both values are null

  • Similar to undefined, if both values are null it returns true.

Example

Object.is(null, null) // returns true
But,
Object.is(null, "null") // returns false as no type casting is done

 

Rule 4: Both values are objects having same reference

  • Object comparison here is same as == and === operators.

Example

let a = {"name": "Arwa"}
let b = a

Object.is(a, b) // returns true

Object.is({"name": "Arwa"}, {"name": "Arwa"}) // returns false

Object.is(window, window) // returns true as both refer to the same global variable window

 

Rule 5: Both values are same non-zero and non-NaN number

Example

Object.is(1, 1) // returns true

 

Rule 6: Both values are either +0 or -0

Example

Object.is(0, 0) // returns true
But,
Object.is(0, -0) // returns false unlike == or === operator

 

Rule 7: Both NaN

Example

Object.is(NaN, NaN) // returns true unlike == or === operator
Object.is(NaN, 0/0) // returns true
Think of this as doing isNaN() check for each value.

Don’t forgetObject.is() is not supported in Internet Explorer so use a polyfill instead

Trivia Time

Do you know which comparison operator does the function below uses?

Array.prototype.indexOf()

.

.

.

It’s the Strict Equality Operator or ===.

Tell me more

If you wish to know more, MDN web docs gives great insight about these operators. Below links are useful for starters

Comparison Operators

Expressions and Operators

Conclusion

All 3 comparison operators serve some purpose but if you want to perform some equality check you should always use === operator instead of == operator. If you enjoyed the post, go share it with your fellow programmers and save them those countless hours of debugging. If you have any further question you can DM me on twitter @arwa18793.

Want to master JavaScript?? Look no further, Mosh has a JavaScript bundle with the best materials.

https://codewithmosh.com/p/full-stack-javascript-developer-bundle

Check the link above to enroll in the course.

Hi, I am Arwa!! I love to explore new things going around in the web world and write about it. I am also a speaker & an Instructor. When I am not exploring tech world you can probably see me reading a non-fiction book or watching some science-fiction series !!
Tags: , ,

Leave a Reply

Connect with Me
  • Categories
  • Popular Posts