More about the basics of JavaScript

Do you ever encountered === instead of == and !== instead of != in JavaScript codes and got curious what does it mean? But you were lazy to search and later you forgot about it.

Let me tell you about it but before going to learn that you need to understand one more important concept called type coercion.
So, let's start with that first.

What is Type Coercion?

JavaScript sometimes performs some odd things and gives some weird results that we don't expect. Let me show some examples:

console.log("6" + 2)
-> Output: 62

console.log("5" - 1)
-> Output: 4

As you can see above, in the first example, "2" converts from number to string and + operator concatenated them.
While in the second example, "5" converts from string to number and performs the arithmetic operation.

This weird behavior is something called type coercion. So what exactly happens is whenever JS operators encounter two different types of values in one expression.
It converts one value type into another according to its needs by using some set of rules.
So whenever you encounter such results just check for the accidental type conversions done by you.

Difference between == and ===, != and !==

In the previous article, we learned about comparison operators.
Values, Types, and Operators

But we didn't cover two more comparison operators i.e. === and !== which are used in JavaScript. Let's talk about them now.

Actually, what happens in JS is when we compare two same values using == and != of the same type, it gives the correct result.
But when we do the same comparison with the same values but different types, it does the same weird thing of type coercion means converting one type into another and gives some weird results.

Now, this looks confusing to you and you must be thinking about what I'm even saying.

Let's understand this with the help of some examples:

console.log(5 == 5)
-> Output: true

console.log(6 != 5)
-> Output:  true

console.log("5" == 5)
-> Output: true

console.log("5" != 5)
-> Output: false

As you can see in the above code when I'm comparing two same types of values it is giving correct results but when I'm doing the same thing with different types i.e. one string and one number value it is showing "true" for == and "false" for !=.

So, here's where the use of === and !== comes into the picture. What these comparison operators do is, instead of just checking their values they check for their types also.
Let's understand this also with the help of an example. I'm writing the same code with these operators now.

console.log("5" === 5)
-> Output: false

console.log("5" !== 5)
-> Output: true

Bingo! Now you are seeing the correct results.

So, whenever you need to compare two same values of different types always use "===" and "!==". Also, what most JavaScript developers do is they use "===" and "!==" operators only so they don't stick in some kind of error in larger applications.

That's all, thank you for reading. 😊