Difference Between == and === Explained


Difference Between == and === Explained

*This post may contain affiliate links. As an Amazon Associate we earn from qualifying purchases.

JavaScript (JS) skills have been in high demand for website development for years now, and there is no end in sight for lucrative careers available for experienced JS programmers.

To land the position you seek as a JS professional, the first thing you need to do (after acquiring your JavaScript skills) is to represent yourself effectively in a job interview, which will typically include some questions that test your technical knowledge of JavaScript.

One question commonly presented to JS candidates is the difference between == and === comparisons. Unfortunately, this can often take you off-guard a bit, even if you?re aware of the basic differences. To use these comparisons properly, an in-depth understanding of their functional and performance differences is worthwhile.

Basic Differences Between == and ===

JavaScript provides these two methods for comparing variables, with very different purposes and results. Their basic differences:

  • == operator compares the values of the two variables, making any type corrections needed to make the variables a common type
  • === operator not only compares the values, but the types as well, with no transformation of the object types

Due to this transformation function, the == operator is referred to as using type-converting or loose equality.

The === operator is referred to as utilizing strict equality, since both the type and values must be equal in order to result in a true condition.

These value comparisons are referred to by various names by JavaScript developers:

  • == is known as double equals, loose equality, and abstract equality
  • === is referred to as triple equals and strict equality

Getting Down to the Details

Both == and === are relational operators, meaning that their function is to compare two variables, returning either a true or false result.

The issue arises when dissimilar data types are encountered, which may be due to database elements, or variables defined in your JavaScript code itself, for example:

Var x = 123; generates an integer data type

Var y = ?456?; results in a string data type

JavaScript being quite intelligent, will do the transformation for you when you perform an operation utilizing these two variables such as:

X+y = ? (the resulting value will be ?123456?

Why?

JavaScript will perform ?type coercion? to translate the fields into equal data types to perform the operation.

So what is type coercion?

Type coercion is not unique to JavaScript. Many programming languages utilize this process for interpreting values of one data type to correspond with another value for executing commands successfully.

In this case, JavaScript?s interpreter will transform the variable ?x? from its integer data type into a string variable, then will concatenate the values in the two string variables, resulting in the ?123456? string value.

Since you don?t define the data type per se in JavaScript, you need to be aware of how you declare your variables, so that utilizing == and === will have the anticipated results in your scripts. You just need to consider how JavaScript will handle the difference between == and === in your code, since the effect can produce dramatically different logic flow.

Using the same variables, but equal values of 123 and ?123?, you will find that:

If (x==y) will result in true, since the interpreter will translate the variables into the same data type before comparing the values. However:

If(x===y) will result in a false test, since they are different data types, and the interpreter will not do any type coercion for the === operation.

Which to Use, == Or ===?

Generally speaking, it is best to utilize strict equality (===), but you need to be aware of some specific nuances of the comparison:

Strict Equality (===)

  • As you now understand that === will not perform type transformation, it?s a given that any differences between types will result in a false comparison, even if the content values are the same.
  • Next, consider that if the two data types are NOT numbers, they will be considered equal (true) if their values are the same.
  • Last, if both variables are numbers, they will be considered equal (true) if neither is not a number (NaN) ? utilized in floating point calculations, they have the same value, and even if one has a value of +0 and the other has a value of -0. Strict equality treats negative zero and positive zero as equal values, which is a valid comparison in most situations.
  • With strict equality, NaN is unequal to any other value, even itself.

Loose Equality (==)

Loose equality will result in the same true/false results as strict equality, but only after performing any type conversions required to make the comparison. You can find a useful table for the impact of data type conversions on comparison results on a JavaScript developer website.

Most developers agree that strict equality is the best comparison to use, due to its predictability and lack of any type coercion.

JavaScript attempts to perform type coercion to the best forms for evaluating their likeness, based on specifications set by EMCAScript, the international body that sets the standards for JavaScript. These standards may not produce the results you anticipate in your programming, however.

When Should You Use ==?

In Douglas Crockford?s book ? ?JavaScript: The Good Parts,? taking a quick look at Appendix B will answer your question for when you should use == in your code ? not at all.

This section of Crockford?s popular JavaScript guidebook reveals his opinion on the subject of == – ?avoid these altogether.? The rationale behind this guidance is quite simple ? the function will not return the expected response when the result is false.

Searching the web for other opinions will reveal other JavaScript developers with the same viewpoint:

Confusion about == and === is one of the learning curves of JavaScript. Ryan Peterson points this out as one of the most common coding mistakes prevalent in JavaScript development: Ryan provides his insight on the topic: ?the rules of type coercion can sometimes be as clear as mud. Accordingly, unless type coercion is explicitly desired, it?s typically best to use === and !==(rather than == and !=), so as to avoid any unintended side-effects of type coercion.?

So the consensus on many sides related to when to use ?==? is ? just don?t.

Comparisons ? Emphasis on Use of Strict Equality

For strict equality to return a true response, the following conditions must exist:

  • Two number variables are equal when they have the numeric value. Positive and negative zero are equal to each other. NaN is not equal to any other value, even NaN.
  • Comparing two Boolean operands results in an equal comparison if both are false or both are true.
  • Two strings satisfy the rules of strict equality if they have the same length, the same sequence of characters, and the same characters in the same positions.
  • Two objects that refer to the same object are strictly equal.
  • Undefined and Null types are ==, but not ===.

Performance Implications of == and ===

Are there any considerations for application performance in choosing loose equality over strict equality?

Thinking logically through the steps that JavaScript takes to perform the operations requested by == and ===, most experts agree that the type coercion steps taken when performing == operations adds processing, equating to extra work for the code to do. If both variables undergo coercion, this becomes an even greater performance consideration.

On top of this coercion requirement, think of the process for === operations. Since strict equality will first check for like types of the variables and return false if they do not match, this can streamline the comparison process further. Logically then, === operations should be faster than == in JavaScript.

However, benchmarks to evaluate differences between == and === performance have not always been consistent with that premise. Still, the majority of developers and analysts seem to have both the experience and the benchmarks that bear out at least a slight performance advantage to use of === functions over ==.

Conclusion?

Taking the advice of professional JavaScript developers and coding educators, the difference between == and === is such that the former should be avoided, to ensure accurate and predictable results from comparison in your code.

From a developer view, it makes perfect sense to provide consistent, readable code that generates anticipated results. Where possible, utilize consistent types of variables, to further predict comparison results.

 

Keywords: Difference between == and === explained, difference between == and ===

 

Recent Posts