Difference between == and === operator in JavaScript

JavaScript is widely used to create interactive web pages. It has many frameworks such as React JS, Angular JS, Node JS, etc. Like any other programming language, JavaScript also provides operators like arithmetic, relational, comparison operators, etc. The equality operator, i.e., "==" is one such comparison operator that checks whether the LHS is equal to RHS or not. This operator is present in all other programming languages but it is somewhat different in JavaScript. This is due to the fact that JavaScript is a loosely typed language, whereas all other languages are strictly typed. As JS is loosely typed, it doesn’t compare the type of two variables given. This can be explained by the concept of coercion.

Coercion in JavaScript

Let us consider that we need to add two variables "x" and "y" having the values 2 and 3 respectively. We will get 5 as output. But what if we add "x" with a string? Let’s assume that we are adding the variable "x" with an empty string " ".

In order to perform an operation, both values should be of same type. So, when we run that, JavaScript considers both the values as strings and concatenate them. This consideration depends on the type of operator being used.

If we perform subtraction on two numbers in which one is of string type, then it doesn’t concatenate them. It subtracts one from the other. So, we can say that JavaScript implicitly converts the type of data based on the operations being performed. This is known as coercion.

Now, let’s apply this concept to the double equals (==) operator. Consider two variables "x" and "y", both having 3 as their value, but "3" in "x" variable is of string type.

x = "3"
y = 3

Suppose we compare "x" and "y", i.e., "x == y". Since one is of string type and another is of number type, we expect false as the output as in all other programming languages. But in JavaScript, we get "True".

This is because double equals (==) in JavaScript doesn’t consider the type and uses the concept of coercion to convert one of the datatypes to the other and then performs the operation. But it is not always advisable to implicitly convert a datatype.

In order to overcome this problem, we use triple equals (===) instead of double equals. The triple equals operator is strictly typed and it considers the datatype of both the variables in order to compare them.

If we use triple equals to compare whether "x === y", then we’ll get the result as "False". It is recommended to always use the triple equals operator as it gives the correct output.

Now let's take a couple of examples to understand the concept better −

Example 1

If we compare two same strings, then both double and triple equals give true as output.

str1 = "example"
str2 = "example"
str1 == str2   	// True
str1 === str2   	// True 

Example 2

If we compare a string with a number, both double and triple equals give false.

str1 = "example"
str2 = 3 
str1 == str2   	// False
str1 === str2   	// False

Example 3

If we compare two same numbers in which one of them is of string type, then double equals (==) gives true, while triple equals (===) gives false.

str1 = "7"
str2 = 7
str1 == str2   // True
str1 === str2   // False

Example 4

Let’s take two variables var1 and var2 of which the former stores "8" as a string and the latter one has a value of 7. If we subtract these two variables and compare it whether it is equal to 1, both double and triple equals give True as output. When we perform subtraction, the string value is implicitly converted into a number type by the JavaScript. Hence, the type of the resultant becomes number and both gives the output as True.

var1 = "8"
var2 = 7
y = var1 – var2
y==1   	// True
y === 1   	// True 

Example 5

If we compare zero with false, double equals (==) returns true, whereas triple equals (===) returns false as the output.

0 == False   	// True
0 === False   	// False

This is due to the fact that both "0" and False have the same value i.e., false. So, double equals implicitly convert one of them. Whereas for triple equals, "0" is of type number and False is Boolean type. So, it gives false as output.

Differences: Double Equals (==) and Triple Equals (===) in JavaScript

The following table highlights the major differences between Double Equals (==) and Triple Equals (===) in JavaScript −

Characteristics	Double Equals (==)	Triple Equals (===)
Functions	Double equals (==) compare only the value of the two variables, but not their datatypes.	Triple equals (===) check both the value and datatypes of two variables.
Coercion	It follows the concept of coercion	It doesn’t follow the concept of coercion
Type Conversion	It implicitly converts the type to perform an operation.	It doesn’t convert their original datatypes
Loosely or Strictly typed	It is loosely typed.	It is strictly typed.

Conclusion

Double and triple equals are comparison operators in JavaScript that compare whether the given two variables or values are equal or not. The double equals (==) operator is loosely typed, hence it compares only values. In contrast, the triple equals (===) operator is strictly typed and hence considers their datatypes along with the values.