console.log(0 == 0);        // true ✅
console.log('Hi' == 'Hi');  // true ✅
console.log(456 == 456);    // true ✅

console.log(0 != 456);      // true ✅
console.log('Hi' != 'Bye'); // true ✅

console.log(42 == '42');    // true ✅

console.log(0 == false);    // true ✅
console.log('' == false);   // true ✅

console.log(5 == false);    // false ❌
console.log('j' == false);  // false ❌

Loose Equality is Unreliable

// Groundwork
console.log(0 == false);    // true ✅

// What we expect
// console.log(a == b);  // true ✅
// console.log(a == c);  // true ✅
// console.log(b == c);  // true ✅

// What we get
console.log('' == false);   // true ✅
console.log('0' == false);  // true ✅ (∵ 0 == false)
console.log('' == '0');     // false ❌

Strict Equality

// === and !==

console.log(42 === '42');   // false ❌
console.log(42 === 42);     // true ✅
console.log(42 === +'42');  // true ✅
console.log('message' !== 'hello'); // true  ✅
console.log(42 !== '42');   // true ✅

Enjoy free content straight from your inbox 💌

Transcript

00:00

We've been using strict equality, which is triple equals throughout this course. But let's take a moment to discuss what is low equality or the double equals and why you should steer clear of it as much as possible. When the two data types on the boundary equality operator are the same, it doesn't matter if you use double equals or triple equals because the results will be the same. So as you would expect, a zero will be equal to zero, high will be equal to high, and 4, 5 6 will be equal to 4, 5, 6. And the same is true for lose inequality as well. So not equal behaves the same as not equal, equal if the data types are same on both sides.

00:34

So zero is not equal to 4, 5, 6 and high is not equal to buy. When the data types on the sites are different, then news equality does more. It tries to do type coercion as well. So even though the number 42 and the string 42 are not the same, lose equality will try to pass that string into a number and then do the comparison and therefore it it'll return true. It'll do that for various Boolean comparisons as well. For example, a zero is equal to false. Empty strings are equal to false. A positive number like five is not equal to false. And similarly,

01:08

a non empty string like J is not equal to false. And this type coercion is also run by the lose not equal operator. So the number 42 not equal to the string 42 will return false because once you do the passing on the string 42, they are equal and therefore not equal is false. From the examples, lose equality seems like it should be fine and mostly it is except that it breaks one critical rule of mathematics and that is the commutative property. So if a is equal to B and A is equal to C, then you would hope that B is equal to C.

01:41

So let's see if this is true for lose equality. Now, as you've seen before, zero is equal to false and similarly an MT string is equal to false. But what might catch you off card is there a string containing zero is actually going to be false as well. That is because that string is first going to get converted into a number and we've already established that zero is equal to false. And of course when types are the same, no type coercion takes place. So an empty string is a not equal to the string that contains zero. And this is what is breaking that original competitive property.

02:15

And this is not the only example that breaks this rule. So the question that you have to ask yourself, is it really worth it to be safe in avoiding silly mistakes which can be hard to debug. The guidance is to use only the strict inequality and strict equality operators and do any coercion that you want yourself. The strict equality and the strict inequality operators within JavaScript are triple equals and not equal equal. And I don't know about you, but I'm personally happy if my 42 number does not behave like a 42 string. And similarly of course 42 is equal to 42.

02:48

So if I really wanted to take that string and convert it into a number, I can do that myself. I can do 42 triple equals, convert that 42 into a number with a plus Operator and now they are equal. And similarly, the not equal equal operator does no type coercion. So just like message is not equal to hello, the number 42 is not equal to the string 42 because those equality type coercion has weird edge cases that no one working on modern JS needs to care about type state will actually mark type coercion loose equality as a compiled time error. Now, before I actually started recording this tutorial,

03:23

I actually commented out check js within my TSS config. This is because with this option enabled TypeScript will never allow me to write the crazy code that you have been seeing. And in fact, if you go back to that example where we proved that the double equals loose equality breaks the commutative property, it'll error with the message that this comparison appears. Unintentional, you are comparing strings and Boolean, don't mix your types 'cause you don't know what's going to happen. And even with the same types, it's going to complain that this is always going to be false. What do you think you are doing? I hope you enjoyed this tutorial on JavaScript equality. As always,

03:58

thank you for joining me and I will see you in the next one.