[Just JavaScript] 06. Equality of Values

[allenGKC]

06. Equality of Values

Kinds of Equality

Three kinds of equality:

• Strict Equality: a === b (triple equals).
• Loose Equality: a == b (double equals).
• Same Value Equality: Object.is(a, b).

Same Value Equality: Object.is(a, b)

In JavaScript, Object.is(a, b) tells us if a and b are the same value:

console.log(Object.is(2, 2)); // true
console.log(Object.is({}, {})); // false

This is called Same Value Equality.

Check Your Intuition

let dwarves = 7;
let continents = '7';
let worldWonders = 3 + 4;

what about these question:

console.log(Object.is(dwarves, continents)); // ?
console.log(Object.is(continents, worldWonders)); // ?
console.log(Object.is(worldWonders, dwarves)); // ?

Here are the answers:

1. Object.is(dwarves, continents) is false because dwarves and continents point at different values.
2. Object.is(continents, worldWonders) is false because continents and worldWonders point at different values.
3. Object.is(worldWonders, dwarves) is true because worldWonders and dwarves point at the same value.

But What About Objects?

look at this code snippet:

let banana = {};
let cherry = banana;
let chocolate = cherry;
cherry = {};

what is the answer?

console.log(Object.is(banana, cherry)); // ?
console.log(Object.is(cherry, chocolate)); // ?
console.log(Object.is(chocolate, banana)); // ?

the answer is:

1. Object.is(banana, cherry) is false because banana and cherry point at different values.
2. Object.is(cherry, chocolate) is false because cherry and chocolate point at different values.
3. Object.is(chocolate, banana) is true because chocolate and banana point at the same value.

Strict Equality: a === b

Strict Equality example:

console.log(2 === 2); // true
console.log({} === {}); // false

Same Value Equality vs Strict Equality

Same Value Equality — Object.is(a, b) — has a direct meaning in our mental model. It corresponds to the idea of “the same value” in our universe.

In almost all cases, the same intuition works for Strict Value Equaliy too. For example, 2 === 2 is true because 2 always “summons” the same value.

Consider the cases below as exceptions to the rule:

1. NaN === NaN is false, although they are the same value.
2. -0 === 0 and 0 === -0 are true, although they are different values.

First Special Case: NaN

let width = 0 / 0; // NaN
let height = width * 2; // NaN

Remember that NaN === NaN is always false:

console.log(width === height); // false
console.log(Object.is(width, height)); // true

You may be confusing about this.The reason for NaN === NaN being false is largely historical so I suggest to acccept it as a fact of life.

function resizeImage(size) {
  if (size === NaN) {
    // Doesn't work: the check is always false!
    console.log('Something is wrong.');
  }
  // ...
}

Instead, here’s a few ways (they all work!) to check if size is NaN:

• Number.isNaN(size)
• Object.is(size, NaN)
• size !== size

Second Special Case: -0

Both 0 === -0 and -0 === 0 are always true:

let width = 0; // 0
let height = -width; // -0
console.log(width === height); // true

However, 0 is a different value from -0:

console.log(Object.is(width, height)); // false

Loose Equality

console.log([[]] == ''); // true
console.log(true == [1]); // true
console.log(false == [0]); // true

The rules of Loose Equality (also called “abstract equality”) are arcane and confusing. They are widely acknowledged as an early bad design decision. Many coding standards prohibit the use of == and != in code altogether.

Recap

• JavaScript has several kinds of equality. They include Same Value Equality, Strict Equality, and Loose Equality.
• Same Value Equality, or Object.is(a, b), matches the concept of the sameness of values that we introduced in the previous module.
  • Understanding this kind of equality helps prevent bugs! You will often need to know when you’re dealing with the same value, and when you’re dealing with two different values.
  • When we draw a diagram of values and variables, the same value cannot appear twice on it. Object.is(a, b) is true when variables a and b point to the same value on our diagram.
  • Same Value Equality is the easiest to explain, which is why we started with it. However, it’s verbose and a bit annoying to write.
• In practice, you will use Strict Equality, or a === b, most often. It is equivalent to the Same Value Equality except for two rare special cases:
  • NaN === NaN is false, even though they are the same value.
  • 0 === -0 and -0 === 0 is true, but they are different values.
• You can check whether x is NaN using Number.isNaN(x).
• Loose Equality (==) is a set of arcane rules and is often avoided.