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

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

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:

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.

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:

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:

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.

Please leave your comments below and like on Facebook or follow on Twitter to stay up-to-date.

comments powered by Disqus