Does it matter which equals operator (== vs ===) I use in JavaScript comparisons?
74
I'm using JSLint to go through some horrific JavaScript at work and it's returning a huge number of suggestions to replace == (two equals signs) with === (three equals signs) when doing things like comparing idSele_UNVEHtype.value.length == 0 inside of an if statement.

Is there a performance benefit to replacing == with ===? 

Any performance improvement would probably be welcomed as there are hundreds (if not thousands) of these comparison operators being used throughout the file.

Would I be correct in assuming that if no type conversion takes place, there would be a small (probably extremely small) performance gain over ==?
improve this question | comment
Gino Medhurst Created at: 2013-11-13 17:07:26 UTC By Gino Medhurst
To whom it might be interested in the same subject === vs ==, but in PHP, can read here: stackoverflow.com/questions/2401478/why-is-faster-than-in-php/… - Marielle Watsica
Just in case anyone was wondering in 2012: === is way faster than ==. jsperf.com/comparison-of-comparisons - Kayleigh Beer
@minitech it should be as it does not do type conversion - Abbie Wilderman
As this question stands, it places much emphasis on speed of operators. As Knuth said, premature optimization is the root of all evil and replacing == with === without first identifying them as bottlenecks certainly falls into this category. Don't optimize before you measure the impact on your app. Make the code correct, readable, maintainable, optimize app architecture and if that is not enough, optimize those tiny fragments that you identify as bottlenecks though tests. The result will be a better and (in most cases) faster application. - Taylor Swaniawski
@johndodo: Premature Optimization is only a thing because optimized code can be less ideal from a maintainability and readability standpoint, but if the type conversion features of == are not needed, the use of === instead is good practice, not premature optimization.  There's nothing about === that degrades code maintainability or readability. - Dorian Jacobi Sr.
23 Answers
0
I cover the differences in a post on my blog recently - http://www.aaron-powell.com/blog.aspx?id=1261

Short story, == is equality comparision without type checking and === is equality comparision with type checking
0
In a typical script there will be no performance difference. More important may be the fact that thousand "===" is 1KB heavier than thousand "==" :) Javascript profilers can tell you if there is performance difference in your case.

But personally i would do what JSLint suggests. This recommendation is there not because of performance issues, but because type coercion means ('\t\r\n' == 0) is true.
0
In the answers here, I didn't read anything about what equal means. Some will say that === means equal and of the same type, but that's not really true. It actually means that both operands reference the same object, or in case of value types, have the same value.

So, let's take the following code:

var a = [1,2,3];
var b = [1,2,3];
var c = a;

var ab_eq = (a === b); // false (even though a and b are the same type)
var ac_eq = (a === c); // true


The same here:

var a = { x: 1, y: 2 };
var b = { x: 1, y: 2 };
var c = a;

var ab_eq = (a === b); // false (even though a and b are the same type)
var ac_eq = (a === c); // true


Or even:

var a = { };
var b = { };
var c = a;

var ab_eq = (a === b); // false (even though a and b are the same type)
var ac_eq = (a === c); // true


This behavior is not always obvious. There's more to the story than being equal and being of the same type.

The rule is:

For value types (numbers):a === b returns true if a and b have the same value and are of the same type

For reference types:a === b returns true if a and b reference the exact same object

For strings:a === b returns true if a and b are both strings and contain the exact same characters

Strings: the special case...

Strings are not value types, but in Javascript they behave like value types, so they will be "equal" when the characters in the string are the same and when they are of the same length (as explained in the third rule)

Now it becomes interesting:

var a = "12" + "3";
var b = "123";

alert(a === b); // returns true, because strings behave like value types


But how about this?:

var a = new String("123");
var b = "123";

alert(a === b); // returns false !! (but they are equal and of the same type)


I thought strings behave like value types? Well, it depends who you ask... In this case a and b are not the same type. a is of type Object, while b is of type string. Just remember that creating a string object using the String constructor creates something of type Object that behaves as a string most of the time.
0
This question is more than a year old, but please let me add this counsel:

If in doubt, read the specification! 

ECMA-262 is the specification for a scripting language of which Javascript is a dialect. Of course in the practice it matters more how the most important browsers behave than an esoteric definition how something is supposed to be handled. But it is helpful to understand why new String("a") !== "a".

Please let me explain how to read the specification to clarify this question. I see that in this very old topic nobody had an answer for the very strange effect. So, if you can read a specification, this will help you in your profession tremendously. It is an acquired skill. So, let's continue.

Searching the PDF file for === brings me to page 56 of the specification: 11.9.4. The Strict Equals Operator ( === ), and after wading through the specificationalese I find:


  11.9.6 The Strict Equality Comparison Algorithm
  The comparison x === y, where x and y are values, produces true or false. Such a comparison is performed as follows:
    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 not Number, go to step 11.
    5. If x is NaN, return false.
    6. If y is NaN, return false.
    7. If x is the same number value as y, return true.
    8. If x is +0 and y is −0, return true.
    9. If x is −0 and y is +0, return true.
    10. Return false.
    11. If Type(x) is String, then return true if x and y are exactly the same sequence of characters (same length and same characters in corresponding positions); otherwise, return false.
    12. If Type(x) is Boolean, return true if x and y are both true or both false; otherwise, return false.
    13. Return true if x and y refer to the same object or if they refer to objects joined to each other (see 13.1.2). Otherwise, return false.


Interesting ist step 11. Yes, strings are treated as value types. But this does not explain why new String("a") !== "a". Do we have a browser not conforming to ECMA-262?

Not so fast!

Let's check the types of the operands. Try it out for yourself by wrapping them in typeof(). I find that new String("a") is an object, and step 1 is used: return false if the types are different.

If you wonder why new String("a") does not return a string, how about some exercise reading a specification? Have fun!

Aidiakapi wrote this in a comment below:


  From the specification 
  
  11.2.2 The new Operator:
  
  If Type(constructor) is not Object, throw a TypeError exception.
  
  With other words, if String wouldn't be of type Object it couldn't be used with the new operator. 


new always returns an Object, even for String constructors, too. And alas! The value semantics for strings (see step 11) is lost.

And this finally means: new String("a") !== "a".
0
In PHP and JavaScript, it is a strict equality operator. Which means, it will compare both type and values.
0
I tested this in Firefox with Firebug using code like this:

console.time("testEquality");
var n = 0;
while(true) {
    n++;
    if(n==100000) break;
}
console.timeEnd("testEquality");


and

console.time("testTypeEquality");
var n = 0;
while(true) {
    n++;
    if(n===100000) break;
}
console.timeEnd("testTypeEquality");


My results (tested 5 times each and averaged):

==: 115.2
===: 114.4


so I'd say that the miniscule difference (this is over 100000 iterations, remember) is negligible. Performance ISN'T a reason to do ===. Type safety (well as safe as you're gonna get in JS), and code quality is.
0
In Javascript it means of the same value and type

for example 

4 == "4" will return true


but

4 === "4" will return false 

0
The === operator is called a strict comparison operator, it does differ from the == operator.

Lets take 2 vars a and b.

For "a == b" to evaluate to true a and b need to be the same value.

In the case of "a === b" a and b must be the same value and also the same type for it to evaluate to true.  

Take the following example

var a = 1;
var b = "1";

if (a == b) //evaluates to true as a and b are both 1
{
    alert("a == b");
}

if (a === b) //evaluates to false as a is not the same type as b
{
    alert("a === b");
}


In summary; using the == operator might evaluate to true in situations where you do not want it to so using the === operator would be safer.  

In the 90% usage scenario it won't matter which one you use, but it is handy to know the difference when you get some unexpected behaviour one day.
0
It means equality without type coercion

0==false   // true
0===false  // false, different types

0
it checked for the same type also for both sides. 

var x = '1';
var y = 1;
x === y // false


'string' != 'number' for example
0
There is unlikely to be any performance difference between the two operations in your usage. There is no type-conversion to be done because both parameters are already the same type. Both operations will have a type comparison followed by a value comparison.
0
Using the == operator (Equality)

true == 1; //true, because 'true' is converted to 1 and then compared
"2" == 2;  //true, because 2 is converted to "2" and then compared


Using the === operator (Identity)

true === 1; //false
"2" === 2;  //false


This is because the equality operator == does type coercion, meaning that the interpreter implicitly tries to convert the values before comparing.

On the other hand, the identity operator === does not do type coercion, and thus does not convert the values when comparing.
0
From the core javascript reference
=== Returns true if the operands are strictly equal (see above) with no type conversion.    
0
It's a strict check test.

It's a good thing especially if you're checking between 0 and false and null. 

For example, if you have:

$a = 0;

Then:

$a==0; 
$a==NULL;
$a==false;


All returns true and you may not want this. Let's suppose you have a function that can return the 0th index of an array or false on failure. If you check with "==" false, you can get a confusing result.

So with the same thing as above, but a strict test:

$a = 0;

$a===0; // returns true
$a===NULL; // returns false
$a===false; // returns false

0
The equal comparison operator == is confusing and should be avoided. If you HAVE TO live with it, then remember the following 3 things: 

It is not transitive: (a == b) and (b == c) does not lead to (a == c)
It's mutually exclusive to its negation: (a == b) and (a != b) always hold opposite Boolean values, with all a and b.
In case of doubt, learn by heart the following truth table:
EQUAL OPERATOR TRUTH TABLE IN JAVASCRIPT

Each row in the table is a set of 3 mutually "equal" values, meaning that any 2 values among them are equal using the equal == sign*
** STRANGE: note that any two values on the first column are not equal in that sense.**

''       == 0 == false   // Any two values among these 3 ones are equal with the == operator
'0'      == 0 == false   // Also a set of 3 equal values, note that only 0 and false are repeated
'\t'     == 0 == false   // -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
'\r'     == 0 == false   // -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
'\n'     == 0 == false   // -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
'\t\r\n' == 0 == false   // -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --

null == undefined  // These two "default" values are not-equal to any of the listed values above
NaN                // NaN is not equal to any thing, even to itself.

0
it checks the values well as type of the variable to for equality
0
JSLint sometimes gives you unrealistic reasons to modify stuff. === has the exactly same performance as == if the types are already the same. 

It is faster only when the types are not the same, in which case it does not try to convert types but directly returns a false.

So, IMHO, JSLint maybe used to write new code, but useless over-optimizing should be avoided at all costs. 

Meaning, there is no reason to change == to === in a check like if (a == 'test') when you know it for a fact that a can only be a String. 

Modifying a lot of code that way wastes developers' and reviewers' time and achieves nothing.
0
JavaScript === vs == .

    0==false   // true
    0===false  // false, because they are of a different type
    1=="1"     // true, auto type coercion
    1==="1"    // false, because they are of a different type

0
As a rule of thumb, I would generally use === instead of == (and !== instead of !=).

Reasons are explained in in the answers above and also Douglas Crockford is pretty clear about it (JavaScript: The Good Parts).

However there is one single exception:
== null is an efficient way to check for 'is null or undefined':

if( value == null ){
    // value is either null or undefined
}


For example jQuery 1.9.1 uses this pattern 43 times, and  the JSHint syntax checker even provides the eqnull relaxing option for this reason.

From the jQuery style guide:


  Strict equality checks (===) should be used in favor of ==. The only
  exception is when checking for undefined and null by way of null.

// Check for both undefined and null values, for some important reason. 
undefOrNull == null;


0
The problem is that you might easily get into trouble since JS have a lot of implicit conversions meaning ...

var x = 0;
var isTrue = x == null;
var isFalse = x === null;


Which pretty soon becomes a problem. The best sample of why implicit conversion is "evil" can be taken from this code in MFC / C++ which actually will compile due to an implicit conversion from CString to HANDLE which is a pointer typedef type...

CString x;
delete x;


Which obviously during runtime does very undefined things...

Google for impliciti conversions in C++ and STL to get some of the arguments against it...
0
The top 2 answers both mentioned == means equality and === means identity. Unfortunately, this statement is incorrect. 

If both operands of == are objects, then they are compared to see if they are the same object. If both operands point to the same object, then the equal operator returns true. Otherwise,
the two are not equal. 

var a = [1, 2, 3];  
var b = [1, 2, 3];  
console.log(a == b)  // false  
console.log(a === b) // false  


In the code above, both == and === get false because a and b are not the same objects.

That's to say: if both operands of == are objects, == behaves same as ===, which also means identity. The essential difference of this two operators is about type conversion. == has conversion before it checks equality, but === does not.
0
Equality comparison: 

Operator ==

Returns true, when both operands are equal. The operands are converted to the same type before being compared.

>>> 1 == 1
true
>>> 1 == 2
false
>>> 1 == '1'
true


Equality and type comparison: 

Operator ===

Returns true if both operands are equal and of the same type. It's generally 
better and safer if you compare this way, because there's no behind-the-scenes type conversions.

>>> 1 === '1'
false
>>> 1 === 1
true

0
The identity (===) operator behaves identically to the equality (==) operator except no type conversion is done, and the types must be the same to be considered equal.

Reference: Javascript Tutorial: Comparison Operators

The == operator will compare for equality after doing any necessary type conversions.  The === operator will not do the conversion, so if two values are not the same type === will simply return false. It's this case where === will be faster, and may return a different result than ==. In all other cases performance will be the same.

To quote Douglas Crockford's excellent JavaScript: The Good Parts,


  JavaScript has two sets of equality operators: === and !==, and their evil twins == and !=.  The good ones work the way you would expect.  If the two operands are of the same type and have the same value, then === produces true and !== produces false.  The evil twins do the right thing when the operands are of the same type, but if they are of different types, they attempt to coerce the values.  the rules by which they do that are complicated and unmemorable.  These are some of the interesting cases:

'' == '0'           // false
0 == ''             // true
0 == '0'            // true

false == 'false'    // false
false == '0'        // true

false == undefined  // false
false == null       // false
null == undefined   // true

' \t\r\n ' == 0     // true

  
  The lack of transitivity is alarming.  My advice is to never use the evil twins.  Instead, always use === and !==.  All of the comparisons just shown produce false with the === operator.


Update:

A good point was brought up by @Casebash in the comments and in @Phillipe Laybaert's answer concerning reference types.  For reference types == and === act consistently with one another (except in a special case).

var a = [1,2,3];
var b = [1,2,3];

var c = { x: 1, y: 2 };
var d = { x: 1, y: 2 };

var e = "text";
var f = "te" + "xt";

a == b            // false
a === b           // false

c == d            // false
c === d           // false

e == f            // true
e === f           // true


The special case is when you compare a literal with an object that evaluates to the same literal, due to its toString or valueOf method. For example, consider the comparison of a string literal with a string object created by the String constructor.

"abc" == new String("abc")    // true
"abc" === new String("abc")   // false


Here the == operator is checking the values of the two objects and returning true, but the === is seeing that they're not the same type and returning false.  Which one is correct?  That really depends on what you're trying to compare.  My advice is to bypass the question entirely and just don't use the String constructor to create string objects.
Your Answer