When I first started using Javascript comparison operators in my code, I was often confused as to which operator to use when comparing values. I did the usual stack overflow search and took the advice of the first post I saw. The advice suggested that when I am to compare values, i should just stick to the === comparison operator at ALL costs!

It wasn’t until later on down the track in my coding journey that i discovered the == comparison operator a lot more frequently in other people’s code, so I began to wonder if i really should continue to avoid it in my own code.

In this post I’m going to outline the subtle difference between both the non-strict and strict equality operators so you can put those uncertainties to rest.

The Equality Comparison Operators: == VS ===

The equality comparison operators are used to compare values when we write conditionals in Javascript and then execute a block of code based on that condition if it evaluates to true or false.

If we wanted to compare two numbers in a conditional if else statement, we could use the STRICT equality comparison operator === . If the condition that these 2 numbers are the same evaluates to true, then the string ‘They are the same’ will get logged to the console. We then have an else statement where the string ‘They are different’ will get logged to the console if the condition evaluates to false like so:

if (2 === 2) {
console.log('They are the same')
} else {
console.log('They are different')
}// Output: They are the same

If we run this conditional statement, we’ll see that the first code block will execute, obviously because the number 2 is, well, the same as the number 2. No brainer.

Ok so what would happen if we use the NON-STRICT equality comparison operator == instead?

if (2 == 2) {
console.log('They are the same')
} else {
console.log('They are different')
}// Output: They are the same

This condition also evaluates to true. So what the hell is the difference between NON-STRICT and STRICT then?

It’s simple.

The difference is that the STRICT === operator cares if the data type of the two values are different.

What does that mean? Let’s have a look.

If we get the number 2 which has a data type of number and compare it to the number ‘2’ which has a data type of string, surrounded by quotes, what would happen then?

if (2 === '2') {
console.log('They are the same') 
} else {
console.log('They are different') 
}// Output: They are different

That’s interesting. They’re both the number 2 but because the data types are different, the condition evaluates to false and so the second code block executes.

What if we use the NON-STRICT equality operator then?

if (2 == '2') {
console.log('They are the same') 
} else {
console.log('They are different') 
}// Output: They are same

Aha! So now it makes sense. Basically the NON-STRICT == operator couldn’t care less if one value is a number and the other value is a string. It still treats the values as being the same so the condition evaluates to true.

So you’re probably wondering, ok but why would we even need both NON-STRICT and STRICT equality operators? When would we need it?

Well, an example would be if we had a section in our app that needed to check if the user was a specific age and for some reason, maybe we needed the user to enter their age inside a text input field (ideally you would use a number input field but let’s use the text input field for this example). We would save the age value to a variable and because it came from a text input field, it will be saved as a string.

Then we could perform the comparison of the user age value and the specific age value. Let’s take a look:

let userAge = '22'
let specificAge = 22if (userAge == specificAge) {
console.log('You are the correct age!')
} else {
console.log('You are the wrong age!')
}// Output: You are the correct age!

So there you have it!

The difference between the == non-strict and === strict operators is that the non-strict operator doesn’t care whether the data types of the two values being compared are different or not.

Hope this has helped you! Please follow me for more posts or check out my Youtube channel for useful tutorials on web development!

Happy coding!