TLDR: Force yourself to use triple equals (===)

I stumbled across this JavaScript meme on Reddit, and it’s the best abstraction I’ve ever seen.

You can verify the accuracy of this relationship by running each line of code by running the developer tool. The results are not surprising, but they are still disappointing.

Of course, this little experiment piqued my interest…

How did this happen?

Through experience, I’ve learned to embrace the comical side of JavaScript while feeling its looseness. Still, the details of the incident puzzled me.

As Kyle Simpson said…

“Anyway, I don’t think anyone really knows JS.”

When these cases arise, it’s best to consult the source code — the official ECMAScript specification for building JavaScript.

So with this specification, let’s really understand what’s going on here.

Plate 1 – Introduced coercion

If you run 0 == “0” on the developer console, why does it return true?

0 is a number, and then “0” is a string, and they should never be the same! Most programming languages adhere to it. For example, 0 == “0” in Java returns the following:

error: incomparable types: int and String
Copy the code

That makes sense. If you want to compare ints and Strings in Java, you must first convert them to the same type.

But this is JavaScript, you guys!

When you compare two values by ==, one of the values may be cast.

Force – Automatically converts a value from one type to another.

Automatic here is the key word. Instead of explicitly converting your types, JavaScript does it for you behind the scenes.

This is convenient if you use it purposefully, but can be harmful if you don’t know what it means.

This is the official ECMAScript language specification for it. I’ll explain the relevant parts:

If x is Number and y is String, return x == ToNumber(y)

If x is a number and y is a string, return y compared with x after converting y to a number

So our example 0 == “0” :

Because 0 is a numeric type and “0” is a string type, return 0 == ToNumber(“0”)

Our string “0” has been secretly converted to the number 0, and now we have a match!

0= ="0" // true
// The second 0 became a number!
// so 0 equals 0 is true....
Copy the code

Strange, isn’t it? Get used to it. Let’s move on

Plate 2 – arrays are also mandatory

This enforcement is not limited to basic data types such as strings, numbers, or Booleans. Here’s our next comparison:

0= = []// true
// What happened... ?
Copy the code

Forced again! I will explain the relevant parts of the specification:

If x is String or Number and y is Object, return x == ToPrimitive(y)

If x is a string or number type and y is an object type, y is converted to a primitive data type to be compared with x

Here are three things:

1. Yes, arrays are objects

Sorry to refresh your mind.

2. Empty arrays become empty strings

Again according to the specification, JS first looks for an object’s toString method to cast it.

In the case of an array, toString concatenates all its elements and returns them as strings.

[1.2.3].toString() / / "1, 2, 3"
['hello'.'world'].toString() // "hello,world"
Copy the code

Because our array is empty, we have nothing to concatenate! So…

[].toString() / / ""
Copy the code

ToPrimitive in the specification converts an empty array to an empty string. Relevant references are here and here for easy reference (or puzzlement).

3. The empty string then becomes 0

You can’t get these things done. Now that we’ve forced the array to “”, we’re back to the first algorithm (specification)…

If x is Number and y is String, return x == ToNumber(y)

So 0 = = “”

Since 0 is Number and “” is String, return 0 == ToNumber(“”)

ToNumber(“”) returns 0.

So, again 0==0…

Plate 3 – Quick review

This is correct

0= ="0" // true
Copy the code

Because it’s forced to this 0 == ToNumber(“0”).

This is also true

0= = []// true
Copy the code

Because the cast is executed twice:

  1. ToPrimitive([])Converts to an empty string
  2. thenToNumber("")Convert to 0.

So, tell me… According to the rules above, what is returned below?

"0"= = []Copy the code

Plate 4-false!

FALSE! Correct.

This part makes sense if you understand the rules.

Here’s how we compare:

"0"= = []// false
Copy the code

Again refer to the specification:

If x is String or Number and y is Object, return x == ToPrimitive(y)

That means…

Since “0” is String and [] is Object, return x == ToPrimitive([])

"0"= =""
Copy the code

“0” and “” are both strings, so JavaScript does not need to cast them anymore. That’s why you get false.

conclusion

Use the triple equals sign (===) and get a good night’s sleep.

0= = ="0" // false
0= = = []// false
"0"= = = []// false
Copy the code

It completely avoids casting, so I guess it’s also more efficient!

But (‘===’) performance gains are almost meaningless. The real win is the added confidence you build into the code that makes the extra keystroke totally worth it.

Reference and postscript

  • Original: www.freecodecamp.org/news/explai…
  • First article: github.com/reng99/blog…

More content, please poke my blog to understand, can leave a star better 💨