== vs === in Javascript and Which Should be Used When

Umer Mansoor Umer Mansoor Follow Oct 12, 2019 · 6 mins read

In Javascript, we have couple of options for checking equality:

  • == (Double equals operator): Known as the equality or abstract comparison operator
  • === (Triple equals operator): Known as the identity or strict comparison operator

In this post, we’ll explore the similarities and differences between these operators.

Let’s declare two variables foo and bar and compare them using both operators.

var foo = 13;
var bar = 13;

console.log(foo ==  bar); // true
console.log(foo === bar); // also true

In the above example, both operators returned the same answer i.e. true. So what’s the difference?

The Difference between == and ===

The difference between == and === is that:

  • == converts the variable values to the same type before performing comparison. This is called type coercion.
  • === does not do any type conversion (coercion) and returns true only if both values and types are identical for the two variables being compared.

Let’s take a look at another example:

var one = 1;
var one_again = 1;
var one_string = "1";  // note: this is string

console.log(one ==  one_again);  // true
console.log(one === one_again);  // true
console.log(one ==  one_string); // true. See below for explanation.
console.log(one === one_string); // false. See below for explanation.
  • Line 7: console.log(one == one_string) returns true because both variables, one and one_string contain the same value even though they have different types: one is of type Number whereas one_string is String. But since the == operator does type coercion, the result is true.
  • Line 8: console.log(one === one_string) returns false because the types of variables are different.

Is === Faster than ==? A Quick Look at the Performance of the Two Operators

In theory, when comparing variables with identical types, the performance should be similar across both operators because they use the same algorithm. When the types are different, triple equals operator (===) should perform better than double equals (==) because it doesn’t have to do the extra step of type coercion. But does it? Here are some performance tests you could try yourself to see for yourself.

If you look at the graph at the bottom of the tests, you’d see performance varies across different browser implementations and the gains in performance are almost negligible.

But if you think about it, performance is totally irrelevant and shouldn’t play a role in deciding when to use one operator over the other. Either you need type coercion or you don’t. If you don’t need it, don’t use double equals operator (==) because you might get unexpected results. Most linters will complain if you use ==. To further scare you away from ==: it’s pretty confusing and has odd rules. For example, "1" == true or "" == 0 will return true. For more peculiarities, take a look at the Javascript Equality Table.

In short, always use === everywhere except when you need type coercion (in that case, use ==.)

Inequality Operators: != and !==

== and === have their counterparts when it comes to checking for inequality:

  • !=: Converts values if variables are different types before checking for inequality
  • !==: Checks both type and value for the two variables being compared
var one = 1;
var one_again = 1;
var one_string = "1";  // note: this is a string

console.log(one != one_again);  // false
console.log(one != one_string); // false
console.log(one !== one_string);// true. Types are different

Equality Operators and Objects (and other reference types)

So far, we have been exploring equality or inequality operators using primitive types. What about reference types like Arrays or Objects. If we create two arrays that have identical contents, can we compare them using equalty operators the same way we do it for primitives? The answer is no, you can’t. Let’s take a look at an example:

var a1 = [1,2,3,4,5]
var a2 = [1,2,3,4,5]

console.log(a1 ==  a2); // false
console.log(a1 === a2); // false

Here, both the == and === return the same answer: false. What’s happening here is that both a1 and a2 are pointing to different objects in memory. Even though the array contents are the same, these essentially have different values. Same applies to objects and other reference types.

ECMAScript 6: Object.is()

I said that the beginning of the article that are couple of options for checking equality in Javascript. That isn’t true anymore. ECMA Script 6 introduced a third method for comparing values:

  • Object.is()

Triple equals operator (===) is the recommended way for value comparison, but it’s not perfect. Here’s couple of examples where its behavior is confusing:

console.log(+0 === -0);   // true 
console.log(NaN === NaN); // false

To make comparisons less confusing, ECMAScript 6 introduced a new method: Object.is(). It takes two arguments and returns true if both the values and types are equal. Essentially, its identical to the === operator, but without its quirks. Let’s take a look at some examples:

console.log(Object.is(2, 2));    // true
console.log(Object.is(2, "2"));  // false. Different types

// And it fixes the quirks of ===
console.log(Object.is(+0, -0));  // false
console.log(Object.is(NaN, NaN));// true

That’s all! I hope you enjoyed this post. Please share and leave your comments below.

#javascript #popular

You May Also Enjoy


If you like this post, please share using the buttons above. It will help CodeAhoy grow and add new content. Thank you!


Comments (6)


Dileep Nagendra

very clearly explained


Sayed Pritom

Very consistent & helpful article. Thank you.


foxet

thank you your great


Eric M Hill

This is a wonderful article. I’m going through an online bootcamp and have just begun the Javascript portion. Even without me having knowledge of the language, your article clearly communicated the concept to me. Thanks a bunch!


Elmar Zander

Very good article, thanks!

Allow me just one comment: that NaN===NaN returns false is not a quirk, but it’s like that in every decent floating point implementation (i.e. following IEEE 745), and makes perfect sense in a mathematical way. NaN’s are the result of undefined mathematical operations like Infinity-Infinity or Infinity*0 and it just makes no sense to declare the results of two undefined operation to be the same.


Muhammad Mansoor

great article.


Speak Your Mind