This blog will cover the concepts of type conversion, type coercion, loose equality operator, and strict equality operator in javascript, with the main focus on comparing the two operators.

Introduction to Equality Operators

In javascript, we have two equality operators, the strict equality operator (===) and the loose equality operator (==). Although they may give the same output in some cases, they are very different than one another.

Let's look at an example where they give similar output.

const chocolates = 10;
const candies = 10;
chocolates == candies //True
chocolates === candies //True

Now, let's change the above code a little bit and try again.

const chocolates = 10;
const candies = `10`;
chocolates == candies //True
chocolates === candies //False

Did you notice the difference? The loose equality operator gave the output as true and the strict equality operator as false after converting one of the values to a string datatype.

Now you must be wondering why this happened. To understand this concept, we need to know what "type coercion" is. Let's find out!

Type Coercion And Type Conversion

Type Conversion

Have you ever tried to convert one datatype to another? This practice is called type conversion. JavaScript has a few functions which we can use to convert datatypes from one to another.

There are three such functions:

• Number(): Converts datatype to number.

• String(): Converts datatype to string.

• Boolean(): Converts datatype to boolean.

Let us look at these functions in action!

const chocolates = 10;
console.log(typeof chocolates); //Output-> number

//Using string function
console.log(typeof String(chocolates)); //Output-> string

//Using boolean function
console.log(typeof Boolean(chocolates));//Output-> Boolean

//Using number function
const chocolates = `10`;
console.log(typeof Number(chocolates));

We will not go in to too many details about type conversion as the information above is sufficient to understand the working of the equality operators.

Type Coercion

So, now you know how to convert the data types to one another manually. And javascript knows it too!

Javascript can, implicitly, convert data types to one another as well. This happens behind the scenes and we do not see it happening. This is known as type coercion.

Let's look at one example.

const chocolates = 10;
const candies = `10`;
console.log(`I ate all the ${chocolates + candies} sweets!`);
//Output-> I ate all the 1010 sweets!

In the above example, we tried to add string and number data types. Clearly, the output was a string. Javascript concatenated the number 10 to the string 10 and produced a new string 1010.

Note that javascript's type coercion behaves differently depending upon the operation being performed. Observe at the code below.

const chocolates = 20;
const candies = `10`;
console.log(`I have ${chocolates - candies} more chocolates than candies.`);
//Output-> I have 10 more chocolates than candies.

Here, javascript implicitly converted the string data type to a number data type, unlike the last example. You would observe the same behavior with a multiplication or a division operator as well where the string data type gets converted to a number data type instead of a number data type to a string data type.

Now that we are aware of the above concepts, we can easily understand the difference between the strict equality operator(===) and the loose equality operator(==).

The Difference Between === and ==

To understand their difference, let's go back to our second example and try to understand what happened there.

const chocolates = 10;
const candies = `10`;
chocolates == candies //True
chocolates === candies //False

We can clearly see that the variable chocolates have the number data type while the variable candies have the string data type. So technically, they are not equal and the output false does make sense. But why does the loose equality operator returns true?

It is because the loose equality operator allows javascript to perform type coercion. So, in the above example, javascript implicitly converts data types to the same data type and shows the output as true.

But the strict equality operator does not allow javascript to perform the type coercion and hence it returns false.

And that's a major difference!

To sum up the major difference, the strict equality operator does not allow javascript to perform type coercion while the loose equality operator does allow javascript to perform type coercion.

Which one to use?

You must be wondering which one we should choose generally while coding.

The answer is STRICT EQUALITY OPERATOR!

As a general rule for writing clean code, always use the === operator as much as possible. The == operator can introduce bugs in our program which can be difficult to spot.

In fact, if possible, try converting values manually instead of relying on the loose equality operator to avoid bugs!

Conclusion

And that's it, now you know the difference between the loose and the strict equality operators and the concepts involved. Both operators are used to check for equality and both give a valid output.

The key difference is that the loose operator lets javascript play with data types while the strict operator is strict with javascript and does not let it play with data types.