JavaScript - === vs == operators performance
I feel an answer with easily verifiable evidence would be best.
These operations are so small that it is difficult to performance test them.
- == 1648 true
- === 1629 true
- control test 1575 true
If you subtract off the control test, it looks like there is a ~30% difference in their speeds on my browser. If you do this multiple times, you can get different answers, but === usually comes up the fastest, which I think is just a testament to just how negligible the difference is.
I think this pretty much proves what others were saying, that the performance difference is a waste of time to think about, but it also shows that === is actually faster. Hopefully this answer can save other people time, those who simply must see proof.
2019 Updates
2019-04-09 Firefox with improved test:
- == 1383 true
- === 1167 true
- control test 429 true
2019-04-09 Chrome with improved test:
- == 249 true
- === 248 true
- control test 248 true
2019-04-09 Edge with improved test:
- == 22510 true
- === 20315 true
- control test 4968 true
Browsers have gotten smarter over the years and it appears my original test has run up against cool optimizations in Chrome and Firefox, rendering it no longer useful. I have made the test more difficult to optimize and increased the number of runs to get meaningful results again. It looks like === is still faster across the board. It is probably still a waste of time to worry about.
var testString = "42";var testString2 = "43";var testString3 = "42";var testNumber = 42;var testNumber2 = 43;var testNumber3 = 42;var testObject = {};var testObject2 = {};var testObject3 = testObject;var start = Date.now();var result = null;for(var i = 0; i < 200000000; i++){ result = testString == testString2 || testNumber == testNumber2 || testObject == testObject2 || testString == testString2 || testNumber == testNumber2 || testObject == testObject2 || testString == testString2 || testNumber == testNumber2 || testObject == testObject2 || testString == testString2 || testNumber == testNumber2 || testObject == testObject2 || testString == testString2 || testNumber == testNumber2 || testObject == testObject2 || testString == testString2 || testNumber == testNumber2 || testObject == testObject2 || testString == testString2 || testNumber == testNumber2 || testObject == testObject2 || testString == testString2 || testNumber == testNumber2 || testObject == testObject2 || testString == testString2 || testNumber == testNumber2 || testObject == testObject2 || testString == testString2 || testNumber == testNumber2 || testObject == testObject2 || testString == testString3 && testNumber == testNumber3 && testObject == testObject3 && testString == testString3 && testNumber == testNumber3 && testObject == testObject3 && testString == testString3 && testNumber == testNumber3 && testObject == testObject3 && testString == testString3 && testNumber == testNumber3 && testObject == testObject3 && testString == testString3 && testNumber == testNumber3 && testObject == testObject3 && testString == testString3 && testNumber == testNumber3 && testObject == testObject3 && testString == testString3 && testNumber == testNumber3 && testObject == testObject3 && testString == testString3 && testNumber == testNumber3 && testObject == testObject3 && testString == testString3 && testNumber == testNumber3 && testObject == testObject3 && testString == testString3 && testNumber == testNumber3 && testObject == testObject3}console.log("==", Date.now() - start, result);var start = Date.now();var result = null;for(var i = 0; i < 200000000; i++){ result = testString === testString2 || testNumber === testNumber2 || testObject === testObject2 || testString === testString2 || testNumber === testNumber2 || testObject === testObject2 || testString === testString2 || testNumber === testNumber2 || testObject === testObject2 || testString === testString2 || testNumber === testNumber2 || testObject === testObject2 || testString === testString2 || testNumber === testNumber2 || testObject === testObject2 || testString === testString2 || testNumber === testNumber2 || testObject === testObject2 || testString === testString2 || testNumber === testNumber2 || testObject === testObject2 || testString === testString2 || testNumber === testNumber2 || testObject === testObject2 || testString === testString2 || testNumber === testNumber2 || testObject === testObject2 || testString === testString2 || testNumber === testNumber2 || testObject === testObject2 || testString === testString3 && testNumber === testNumber3 && testObject === testObject3 && testString === testString3 && testNumber === testNumber3 && testObject === testObject3 && testString === testString3 && testNumber === testNumber3 && testObject === testObject3 && testString === testString3 && testNumber === testNumber3 && testObject === testObject3 && testString === testString3 && testNumber === testNumber3 && testObject === testObject3 && testString === testString3 && testNumber === testNumber3 && testObject === testObject3 && testString === testString3 && testNumber === testNumber3 && testObject === testObject3 && testString === testString3 && testNumber === testNumber3 && testObject === testObject3 && testString === testString3 && testNumber === testNumber3 && testObject === testObject3 && testString === testString3 && testNumber === testNumber3 && testObject === testObject3}console.log("===", Date.now() - start, result);var start = Date.now();var alwaysTrue = true;var alwaysFalse = false;for(var i = 0; i < 200000000; i++){ result = alwaysFalse || alwaysFalse || alwaysFalse || alwaysFalse || alwaysFalse || alwaysFalse || alwaysFalse || alwaysFalse || alwaysFalse || alwaysFalse || alwaysFalse || alwaysFalse || alwaysFalse || alwaysFalse || alwaysFalse || alwaysFalse || alwaysFalse || alwaysFalse || alwaysFalse || alwaysFalse || alwaysFalse || alwaysFalse || alwaysFalse || alwaysFalse || alwaysFalse || alwaysFalse || alwaysFalse || alwaysFalse || alwaysFalse || alwaysFalse || alwaysTrue && alwaysTrue && alwaysTrue && alwaysTrue && alwaysTrue && alwaysTrue && alwaysTrue && alwaysTrue && alwaysTrue && alwaysTrue && alwaysTrue && alwaysTrue && alwaysTrue && alwaysTrue && alwaysTrue && alwaysTrue && alwaysTrue && alwaysTrue && alwaysTrue && alwaysTrue && alwaysTrue && alwaysTrue && alwaysTrue && alwaysTrue && alwaysTrue && alwaysTrue && alwaysTrue && alwaysTrue && alwaysTrue && alwaysTrue}console.log("control test", Date.now() - start, result);
Firstly, performance simply is not a concern. For any real script, any performance gain of using one operator over the other will be infinitessimally small compared to other bottlenecks in the code (typically DOM manipulation would be the number one target).
Secondly, in many cases, == and === will perform exactly the same steps. When the types of the two operands are the same (two strings or two numbers, for example), the ECMAScript specification has precisely the same steps for the two operators. Therefore if you observe a performance difference between the two operators for operands of the same type in one browser or other environment, it is neither guaranteed nor even probable that you will see a similar difference in another browser.
In the case of typeof, as mentioned in your question, the two operands are guaranteed to be of the same type (string) and both operators will do precisely the same thing, so the only reasons to favour one operator over the other are stylistic.
The JS community as a whole has gone rather hardline on this: the consensus seems to be "never use == and != unless you need type coercion", which is too dogmatic for my tastes.
It doesn't matter what performance you get, === is clearly the better choice in this case. Anything else such as better performance is just the icing on the cake. Besides, the difference either way is minimal.