== vs === in Javascript

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.

• jsperf Test 1
• jsperf Test 2

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