The JS equality comparison issue

#javascript #beginners #tutorial

As a common starting point of learning programming languages, one of the first things to do is discover the basic types of that language. Using them to store information as variables or even creating more complex data types, in general, all languages share some simple data types between them

Numbers: 1, 2, -4, 4.2
Text: "John Doe", "Insert your age"
Lists: ["the list has", 3, "elements"]
Boolean: true/false

There are more basic types considered essential for storing information depending on each choice of language but for now, those types can fill all the needs to the reader.

Another common knowledge that a developer aspires to acquire in a new language is compare things. Compare information during the execution of the program and do things based on the result of the comparision is essential software development. Those comparisons can happen using the so-called if-statement and passing a comparison using one of the comparisons operators

var name = "John"

if (name == "John") {
  console.log("Hi, I'm John!") // output => "Hi, I'm John!"
}

The result of one comparison always evaluates a Boolean value: true or false. The actual comparison can be between anything and will always check if those values respect the comparison operator rule. The == is called the equality operator and compares if both values are equal and result in true if they are, and false if don't.

What can be compared?

JavaScript is a language born with some features (or flaws 🤔). As JavaScript born to be a language to run inside the Browser and used by doing things across the page filled with text in it, one of the == features is

Compare if two values are equal, not considering if they are Numbers or Text.

This feature results in a strange behavior that confuses more than help. An example of this is the following code resulting in a valid comparison

var age = "12"

if (age == 12) {
  console.log("I'm 12 years old!") // output => "I'm 12 years old!"
}

And will log the text "I'm 12 years old!". At first sight, this is not a real problem but this can result in strange behaviors. Check the following code and guess what will be the result

var age = "12"

if (age == 12) {
  age = age + 1
}
console.log(age) // output => ???

The result should be

Number 13
Text "13"
Text "121"

The result is the answer 3: "121". Why?

The + operator behaves like a common sum for Numbers and like a concatenation operator for Text, even if one of the parts is a Number. The following example helps to understand how that works

var firstName = "John"
var lastName = "Doe"
var age = 12

var fullName = firstName + " " + lastName // => "John Doe"
var olderAge = 12 + 1 // => 13

But what about the === operator?

After acknowledging this behavior with the == operator, JavaScript received a new 'comparison' operator: === or the triple equality operator. With this operator, it is possible to compare the value and if both of them are the same basic type.

This guarantees that the following code will only execute if the age variable is a Number with the value of 12

var age = "12"

if (age === 12) {
  age = age + 1
}
console.log(age) // output => "12"

And the final log will print just the "12" value, as the age variable is a Text and not a Number, even respecting that age variable has the "12" value.

There are more issues with the == operator that will not be covered here but as a small example of them, there is a comparison of undefined and null and what they evaluate

undefined == null // => true
undefined === null // => false

What operator should I use?

Here is the common ground: Always use the === (triple equal) operator.

It is equivalent to == in all other languages like Python, C/C++, Ruby, or Java. And in JS, there's always a good chance of using the == (double equal) operator resulting in hidden bugs that will haunt the future developers as long as the software keeps running.

Did I miss or forgot something? Is there a thing that you think it's not clear or can be better explained? Feel free to reach me at the comment section or by message and discuss it!